kaiarn/tethys.backend
1
0
Fork 0
forked from geolba/tethys.backend
Code Pull requests Activity

- prettier formatting

Browse source 
- npm updates
- new SearchMap.vue component
This commit is contained in:
Kaimbacher 2023-10-31 15:38:43 +01:00
parent 7bc9f90cca
commit a7142f694f
74 changed files with 3360 additions and 3577 deletions
Download patch file Download diff file Expand all files Collapse all files

26
resources/js/Components/Admin/MenuItemList.vue
View file

@ -1,11 +1,8 @@
<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"
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: {
@ -22,9 +19,9 @@ const props = defineProps({
},
level: {
type: Number,
default: 0
default: 0,
},
})
});
</script>
<template>
@ -40,8 +37,13 @@ const props = defineProps({
</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.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>
@ -49,4 +51,4 @@ const props = defineProps({
<template v-for="item in item.children">
<MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
</template>
</template>
</template>

91
resources/js/Components/Admin/Pagination.vue
View file

@ -59,24 +59,33 @@ total:
<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">
<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">
<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
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
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">
<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>
@ -99,24 +108,33 @@ total:
<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">
aria-hidden="true"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
<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" />
clip-rule="evenodd"
/>
</svg>
</span>
</span>
<!-- <Link v-else :href="data.previous_page_url" rel="prev" -->
<Link v-else :href="prevPageLink" 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>
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">
@ -133,24 +151,33 @@ total:
</template>
</template> -->
<Link v-if="props.data.current_page < props.data.last_page" :href="nextPageLink" rel="next"
<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>
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">
aria-hidden="true"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
<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" />
clip-rule="evenodd"
/>
</svg>
</span>
</span>

98
resources/js/Components/Admin/Sort.vue
View file

@ -4,73 +4,59 @@ 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: '',
},
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');
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 (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);
}
if (props.search == '') {
url.searchParams.delete('search');
} else {
url.searchParams.set('search', props.search);
}
return url.href;
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>
<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>

20
resources/js/Components/AsideMenu.vue
View file

@ -3,7 +3,7 @@
// import { usePage } from '@inertiajs/vue3'
// import { usePage } from '@inertiajs/inertia-vue3';
import { LayoutService } from '@/Stores/layout';
import menu from '@/menu'
import menu from '@/menu';
import AsideMenuLayer from '@/Components/AsideMenuLayer.vue';
import OverlayLayer from '@/Components/OverlayLayer.vue';
@ -14,15 +14,15 @@ const layoutService = LayoutService();
</script>
<template>
<AsideMenuLayer
v-if="menu && Object.keys(menu).length"
:menu="menu"
:class="[
layoutService.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
{ 'lg:hidden xl:flex': !layoutService.isAsideLgActive },
]"
/>
<!-- <OverlayLayer
<AsideMenuLayer
v-if="menu && Object.keys(menu).length"
:menu="menu"
:class="[
layoutService.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
{ 'lg:hidden xl:flex': !layoutService.isAsideLgActive },
]"
/>
<!-- <OverlayLayer
v-show="layoutService.isAsideLgActive"
z-index="z-30"
@overlay-click="layoutService.isAsideLgActive = false"

104
resources/js/Components/AsideMenuItem.vue
View file

@ -11,14 +11,14 @@ import AsideMenuList from '@/Components/AsideMenuList.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
item: {
type: Object,
required: true,
},
isDropdownList: Boolean,
item: {
type: Object,
required: true,
},
isDropdownList: Boolean,
});
const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route): ''));
const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route) : ''));
// const isCurrentRoute = computed(() => (props.item && props.item.route ? stardust.isCurrent(props.item.route): false));
const itemHref = computed(() => (props.item && props.item.href ? props.item.href : ''));
@ -31,64 +31,74 @@ const hasColor = computed(() => props.item && props.item.color);
const isDropdownActive = ref(false);
const componentClass = computed(() => [
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
]);
const hasDropdown = computed(() => props.item.children);
const menuClick = (event) => {
emit('menu-click', event, props.item);
emit('menu-click', event, props.item);
if (hasDropdown.value) {
isDropdownActive.value = !isDropdownActive.value;
}
if (hasDropdown.value) {
isDropdownActive.value = !isDropdownActive.value;
}
};
const activeInactiveStyle = computed(() => {
if (props.item.route && stardust.isCurrent(props.item.route)) {
// console.log(props.item.route);
return styleService.asideMenuItemActiveStyle;
}
else {
return null;
}
if (props.item.route && stardust.isCurrent(props.item.route)) {
// console.log(props.item.route);
return styleService.asideMenuItemActiveStyle;
} else {
return null;
}
});
const is = computed(() => {
if (props.item.href) {
return 'a'
}
if (props.item.route) {
return Link
}
if (props.item.href) {
return 'a';
}
if (props.item.route) {
return Link;
}
return 'div'
})
return 'div';
});
// props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
</script>
<!-- :target="props.item.target ?? null" -->
<template>
<li>
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
<component :is="is" :href="itemRoute ? stardust.route(props.item.route) : props.item.href"
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white" :class="componentClass"
@click="menuClick" v-bind:target="props.item.target ?? null">
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16"
:size="18" />
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
{{ item.label }}
</span>
<!-- plus icon for expanding sub menu -->
<BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
:class="activeInactiveStyle" w="w-12" @click.prevent="menuClick"/>
</component>
<AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
styleService.asideMenuDropdownStyle,
isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
]" is-dropdown-list />
</li>
<li>
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
<component
:is="is"
:href="itemRoute ? stardust.route(props.item.route) : props.item.href"
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
:class="componentClass"
@click="menuClick"
v-bind:target="props.item.target ?? null"
>
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16" :size="18" />
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
{{ item.label }}
</span>
<!-- plus icon for expanding sub menu -->
<BaseIcon
v-if="hasDropdown"
:path="isDropdownActive ? mdiMinus : mdiPlus"
class="flex-none"
:class="activeInactiveStyle"
w="w-12"
@click.prevent="menuClick"
/>
</component>
<AsideMenuList
v-if="hasDropdown"
:menu="item.children"
:class="[styleService.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden']"
is-dropdown-list
/>
</li>
</template>

69
resources/js/Components/AsideMenuLayer.vue
View file

@ -1,5 +1,5 @@
<script setup>
import { router } from '@inertiajs/vue3'
import { router } from '@inertiajs/vue3';
// import { Inertia } from '@inertiajs/inertia';
import { stardust } from '@eidellev/adonis-stardust/client';
import { mdiLogout, mdiClose } from '@mdi/js';
@ -11,10 +11,10 @@ import AsideMenuItem from '@/Components/AsideMenuItem.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
defineProps({
menu: {
type: Object,
default: () => { },
},
menu: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(['menu-click']);
@ -24,43 +24,44 @@ const layoutStore = LayoutService();
const styleStore = StyleService();
const logoutItem = computed(() => ({
name: 'Logout',
label: 'Logout',
icon: mdiLogout,
color: 'info',
link: '#',
name: 'Logout',
label: 'Logout',
icon: mdiLogout,
color: 'info',
link: '#',
}));
const logoutItemClick = async () => {
// router.post(route('logout'));
await router.post(stardust.route('logout'));
// router.post(route('logout'));
await router.post(stardust.route('logout'));
};
const menuClick = (event, item) => {
emit('menu-click', event, item);
emit('menu-click', event, item);
};
</script>
<template>
<aside id="aside" class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden">
<div :class="styleStore.asideStyle" class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
<div :class="styleStore.asideBrandStyle"
class="flex flex-row h-14 items-center justify-between dark:bg-slate-900">
<div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
<b class="font-black">Menu</b>
</div>
<button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="layoutStore.isAsideLgActive = false">
<BaseIcon :path="mdiClose" />
</button>
</div>
<div :class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
class="flex-1 overflow-y-auto overflow-x-hidden">
<AsideMenuList v-bind:menu="menu" @menu-click="menuClick" />
</div>
<!-- <p class="menu-label">About</p>> -->
<ul class="menu-list">
<AsideMenuItem :item="logoutItem" @menu-click="logoutItemClick" />
</ul>
</div>
</aside>
<aside id="aside" class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden">
<div :class="styleStore.asideStyle" class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
<div :class="styleStore.asideBrandStyle" class="flex flex-row h-14 items-center justify-between dark:bg-slate-900">
<div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
<b class="font-black">Menu</b>
</div>
<button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="layoutStore.isAsideLgActive = false">
<BaseIcon :path="mdiClose" />
</button>
</div>
<div
:class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
class="flex-1 overflow-y-auto overflow-x-hidden"
>
<AsideMenuList v-bind:menu="menu" @menu-click="menuClick" />
</div>
<!-- <p class="menu-label">About</p>> -->
<ul class="menu-list">
<AsideMenuItem :item="logoutItem" @menu-click="logoutItemClick" />
</ul>
</div>
</aside>
</template>

172
resources/js/Components/BaseButton.vue
View file

@ -6,112 +6,112 @@ import { getButtonColor } from '@/colors.js';
import BaseIcon from '@/Components/BaseIcon.vue';
const props = defineProps({
label: {
type: [String, Number],
default: null,
},
icon: {
type: String,
default: null,
},
href: {
type: String,
default: null,
},
target: {
type: String,
default: null,
},
routeName: {
type: String,
default: null,
},
type: {
type: String,
default: null,
},
color: {
type: String,
default: 'white',
},
as: {
type: String,
default: null,
},
small: Boolean,
outline: Boolean,
active: Boolean,
disabled: Boolean,
roundedFull: Boolean,
label: {
type: [String, Number],
default: null,
},
icon: {
type: String,
default: null,
},
href: {
type: String,
default: null,
},
target: {
type: String,
default: null,
},
routeName: {
type: String,
default: null,
},
type: {
type: String,
default: null,
},
color: {
type: String,
default: 'white',
},
as: {
type: String,
default: null,
},
small: Boolean,
outline: Boolean,
active: Boolean,
disabled: Boolean,
roundedFull: Boolean,
});
const is = computed(() => {
if (props.as) {
return props.as;
}
if (props.as) {
return props.as;
}
if (props.routeName) {
return Link;
}
if (props.routeName) {
return Link;
}
if (props.href) {
return 'a';
}
if (props.href) {
return 'a';
}
return 'button';
return 'button';
});
const computedType = computed(() => {
if (is.value === 'button') {
return props.type ?? 'button';
}
if (is.value === 'button') {
return props.type ?? 'button';
}
return null;
return null;
});
const labelClass = computed(() => (props.small && props.icon ? 'px-1' : 'px-2'));
const componentClass = computed(() => {
const base = [
'inline-flex',
'cursor-pointer',
'justify-center',
'items-center',
'whitespace-nowrap',
'focus:outline-none',
'transition-colors',
'focus:ring-2',
'duration-150',
'border',
props.roundedFull ? 'rounded-full' : 'rounded',
props.active ? 'ring ring-black dark:ring-white' : 'ring-blue-700',
getButtonColor(props.color, props.outline, !props.disabled),
];
const base = [
'inline-flex',
'cursor-pointer',
'justify-center',
'items-center',
'whitespace-nowrap',
'focus:outline-none',
'transition-colors',
'focus:ring-2',
'duration-150',
'border',
props.roundedFull ? 'rounded-full' : 'rounded',
props.active ? 'ring ring-black dark:ring-white' : 'ring-blue-700',
getButtonColor(props.color, props.outline, !props.disabled),
];
if (props.small) {
base.push('text-sm', props.roundedFull ? 'px-3 py-1' : 'p-1');
} else {
base.push('py-2', props.roundedFull ? 'px-6' : 'px-3');
}
if (props.small) {
base.push('text-sm', props.roundedFull ? 'px-3 py-1' : 'p-1');
} else {
base.push('py-2', props.roundedFull ? 'px-6' : 'px-3');
}
if (props.disabled) {
base.push('cursor-not-allowed', props.outline ? 'opacity-50' : 'opacity-70');
}
if (props.disabled) {
base.push('cursor-not-allowed', props.outline ? 'opacity-50' : 'opacity-70');
}
return base;
return base;
});
</script>
<template>
<component
:is="is"
:class="componentClass"
:href="routeName ? routeName : href"
:type="computedType"
:target="target"
:disabled="disabled"
>
<BaseIcon v-if="icon" :path="icon" />
<span v-if="label" :class="labelClass">{{ label }}</span>
</component>
<component
:is="is"
:class="componentClass"
:href="routeName ? routeName : href"
:type="computedType"
:target="target"
:disabled="disabled"
>
<BaseIcon v-if="icon" :path="icon" />
<span v-if="label" :class="labelClass">{{ label }}</span>
</component>
</template>

94
resources/js/Components/BaseButtons.vue
View file

@ -1,55 +1,51 @@
<script>
import { h, defineComponent } from 'vue'
import { h, defineComponent } from 'vue';
export default defineComponent({
name: 'BaseButtons',
props: {
noWrap: Boolean,
type: {
type: String,
default: 'justify-start'
name: 'BaseButtons',
props: {
noWrap: Boolean,
type: {
type: String,
default: 'justify-start',
},
classAddon: {
type: String,
default: 'mr-3 last:mr-0 mb-3',
},
mb: {
type: String,
default: '-mb-3',
},
},
classAddon: {
type: String,
default: 'mr-3 last:mr-0 mb-3'
render() {
const hasSlot = this.$slots && this.$slots.default;
const parentClass = ['flex', 'items-center', this.type, this.noWrap ? 'flex-nowrap' : 'flex-wrap'];
if (this.mb) {
parentClass.push(this.mb);
}
return h(
'div',
{ class: parentClass },
hasSlot
? this.$slots.default().map((element) => {
if (element && element.children && typeof element.children === 'object') {
return h(
element,
{},
element.children.map((child) => {
return h(child, { class: [this.classAddon] });
}),
);
}
return h(element, { class: [this.classAddon] });
})
: null,
);
},
mb: {
type: String,
default: '-mb-3'
}
},
render () {
const hasSlot = this.$slots && this.$slots.default
const parentClass = [
'flex',
'items-center',
this.type,
this.noWrap ? 'flex-nowrap' : 'flex-wrap'
]
if (this.mb) {
parentClass.push(this.mb)
}
return h(
'div',
{ class: parentClass },
hasSlot
? this.$slots.default().map(element => {
if (element && element.children && typeof element.children === 'object') {
return h(
element,
{},
element.children.map(child => {
return h(child, { class: [this.classAddon] })
}))
}
return h(element, { class: [this.classAddon] })
})
: null
)
}
})
});
</script>

12
resources/js/Components/BaseDivider.vue
View file

@ -1,12 +1,12 @@
<script setup>
const props = defineProps({
navBar: Boolean
})
navBar: Boolean,
});
</script>
<template>
<hr
:class="props.navBar ? 'hidden lg:block lg:my-0.5 dark:border-slate-700' : 'my-6 -mx-6 dark:border-slate-800'"
class="border-t border-gray-100"
>
<hr
:class="props.navBar ? 'hidden lg:block lg:my-0.5 dark:border-slate-700' : 'my-6 -mx-6 dark:border-slate-800'"
class="border-t border-gray-100"
/>
</template>

54
resources/js/Components/BaseIcon.vue
View file

@ -2,39 +2,31 @@
import { computed } from 'vue';
const props = defineProps({
path: {
type: String,
required: true
},
w: {
type: String,
default: 'w-6'
},
h: {
type: String,
default: 'h-6'
},
size: {
type: [String, Number],
default: 16
}
})
path: {
type: String,
required: true,
},
w: {
type: String,
default: 'w-6',
},
h: {
type: String,
default: 'h-6',
},
size: {
type: [String, Number],
default: 16,
},
});
const spanClass = computed(() => `inline-flex justify-center items-center ${props.w} ${props.h}`)
const spanClass = computed(() => `inline-flex justify-center items-center ${props.w} ${props.h}`);
</script>
<template>
<span :class="spanClass">
<svg
viewBox="0 0 24 24"
:width="size"
:height="size"
class="inline-block"
>
<path
fill="currentColor"
:d="path"
/>
</svg>
</span>
<span :class="spanClass">
<svg viewBox="0 0 24 24" :width="size" :height="size" class="inline-block">
<path fill="currentColor" :d="path" />
</svg>
</span>
</template>

160
resources/js/Components/CardBoxClient.vue
View file

@ -1,101 +1,89 @@
<script setup>
import { computed } from 'vue'
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
import CardBox from '@/Components/CardBox.vue'
import BaseLevel from '@/Components/BaseLevel.vue'
import PillTag from '@/Components/PillTag.vue'
import UserAvatar from '@/Components/UserAvatar.vue'
import { computed } from 'vue';
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTag from '@/Components/PillTag.vue';
import UserAvatar from '@/Components/UserAvatar.vue';
const props = defineProps({
name: {
type: String,
required: true
},
login: {
type: String,
required: false
},
email: {
type: String,
required: false
},
date: {
type: String,
required: false
},
progress: {
type: Number,
default: 0
},
text: {
type: String,
default: null
},
type: {
type: String,
default: null
}
})
name: {
type: String,
required: true,
},
login: {
type: String,
required: false,
},
email: {
type: String,
required: false,
},
date: {
type: String,
required: false,
},
progress: {
type: Number,
default: 0,
},
text: {
type: String,
default: null,
},
type: {
type: String,
default: null,
},
});
const pillType = computed(() => {
if (props.type) {
return props.type
}
if (props.progress) {
if (props.progress >= 60) {
return 'success'
}
if (props.progress >= 40) {
return 'warning'
if (props.type) {
return props.type;
}
return 'danger'
}
if (props.progress) {
if (props.progress >= 60) {
return 'success';
}
if (props.progress >= 40) {
return 'warning';
}
return 'info'
})
return 'danger';
}
return 'info';
});
const pillIcon = computed(() => {
return {
success: mdiTrendingUp,
warning: mdiTrendingNeutral,
danger: mdiTrendingDown,
info: mdiTrendingNeutral,
}[pillType.value]
})
return {
success: mdiTrendingUp,
warning: mdiTrendingNeutral,
danger: mdiTrendingDown,
info: mdiTrendingNeutral,
}[pillType.value];
});
const pillText = computed(() => props.text ?? `${props.progress}%`)
const pillText = computed(() => props.text ?? `${props.progress}%`);
</script>
<template>
<CardBox
class="mb-6 last:mb-0"
hoverable
>
<BaseLevel>
<BaseLevel type="justify-start">
<UserAvatar
class="w-12 h-12 mr-6"
:username="props.name"
/>
<div class="text-center md:text-left overflow-hidden">
<h4 class="text-xl text-ellipsis ">
{{ name }}
</h4>
<p class="text-gray-500 dark:text-slate-400">
<!-- {{ date }} @ {{ login }} -->
{{ email }}
</p>
</div>
</BaseLevel>
<PillTag
:type="pillType"
:text="pillText"
small
:icon="pillIcon"
/>
</BaseLevel>
</CardBox>
<CardBox class="mb-6 last:mb-0" hoverable>
<BaseLevel>
<BaseLevel type="justify-start">
<UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
<div class="text-center md:text-left overflow-hidden">
<h4 class="text-xl text-ellipsis">
{{ name }}
</h4>
<p class="text-gray-500 dark:text-slate-400">
<!-- {{ date }} @ {{ login }} -->
{{ email }}
</p>
</div>
</BaseLevel>
<PillTag :type="pillType" :text="pillText" small :icon="pillIcon" />
</BaseLevel>
</CardBox>
</template>

9
resources/js/Components/CardBoxModal.vue
View file

@ -30,8 +30,8 @@ const props = defineProps({
},
deleteId: {
type: Number,
default: null
}
default: null,
},
});
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
@ -43,13 +43,12 @@ const value = computed({
// mode = cancel or confirm
const confirmCancel = (mode) => {
value.value = false;//close
if (props.deleteId){
value.value = false; //close
if (props.deleteId) {
emit(mode, props.deleteId);
} else {
emit(mode);
}
};
const confirm = () => confirmCancel('confirm');

157
resources/js/Components/CardBoxTransaction.vue
View file

@ -1,96 +1,83 @@
<script setup>
import { computed } from 'vue'
import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js'
import CardBox from '@/Components/CardBox.vue'
import BaseLevel from '@/Components/BaseLevel.vue'
import PillTag from '@/Components/PillTag.vue'
import IconRounded from '@/Components/IconRounded.vue'
import { computed } from 'vue';
import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTag from '@/Components/PillTag.vue';
import IconRounded from '@/Components/IconRounded.vue';
const props = defineProps({
amount: {
type: Number,
required: true
},
date: {
type: String,
required: true
},
business: {
type: String,
required: true
},
type: {
type: String,
required: true
},
name: {
type: String,
required: true
},
account: {
type: String,
required: true
}
})
amount: {
type: Number,
required: true,
},
date: {
type: String,
required: true,
},
business: {
type: String,
required: true,
},
type: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
account: {
type: String,
required: true,
},
});
const icon = computed(() => {
if (props.type === 'withdrawal') {
return {
icon: mdiCashMinus,
type: 'danger'
if (props.type === 'withdrawal') {
return {
icon: mdiCashMinus,
type: 'danger',
};
} else if (props.type === 'deposit') {
return {
icon: mdiCashPlus,
type: 'success',
};
} else if (props.type === 'invoice') {
return {
icon: mdiReceipt,
type: 'warning',
};
}
} else if (props.type === 'deposit') {
return {
icon: mdiCashPlus,
type: 'success'
}
} else if (props.type === 'invoice') {
return {
icon: mdiReceipt,
type: 'warning'
}
}
return {
icon: mdiCreditCardOutline,
type: 'info'
}
})
return {
icon: mdiCreditCardOutline,
type: 'info',
};
});
</script>
<template>
<CardBox
class="mb-6 last:mb-0"
hoverable
>
<BaseLevel>
<BaseLevel type="justify-start">
<IconRounded
:icon="icon.icon"
:type="icon.type"
class="md:mr-6"
/>
<div class="text-center space-y-1 md:text-left md:mr-6">
<h4 class="text-xl">
${{ amount }}
</h4>
<p class="text-gray-500 dark:text-slate-400">
<b>{{ date }}</b> via {{ business }}
</p>
</div>
</BaseLevel>
<div class="text-center md:text-right space-y-2">
<p class="text-sm text-gray-500">
{{ name }}
</p>
<div>
<PillTag
:type="icon.type"
:text="type"
small
/>
</div>
</div>
</BaseLevel>
</CardBox>
<CardBox class="mb-6 last:mb-0" hoverable>
<BaseLevel>
<BaseLevel type="justify-start">
<IconRounded :icon="icon.icon" :type="icon.type" class="md:mr-6" />
<div class="text-center space-y-1 md:text-left md:mr-6">
<h4 class="text-xl">${{ amount }}</h4>
<p class="text-gray-500 dark:text-slate-400">
<b>{{ date }}</b> via {{ business }}
</p>
</div>
</BaseLevel>
<div class="text-center md:text-right space-y-2">
<p class="text-sm text-gray-500">
{{ name }}
</p>
<div>
<PillTag :type="icon.type" :text="type" small />
</div>
</div>
</BaseLevel>
</CardBox>
</template>

114
resources/js/Components/CardBoxWidget.vue
View file

@ -1,64 +1,64 @@
<script setup>
import { mdiCog } from '@mdi/js'
import CardBox from '@/Components/CardBox.vue'
import NumberDynamic from '@/Components/NumberDynamic.vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import BaseLevel from '@/Components/BaseLevel.vue'
import PillTagTrend from '@/Components/PillTagTrend.vue'
import BaseButton from '@/Components/BaseButton.vue'
import { mdiCog } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import NumberDynamic from '@/Components/NumberDynamic.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTagTrend from '@/Components/PillTagTrend.vue';
import BaseButton from '@/Components/BaseButton.vue';
defineProps({
number: {
type: Number,
default: 0
},
icon: {
type: String,
default: null
},
prefix: {
type: String,
default: null
},
suffix: {
type: String,
default: null
},
label: {
type: String,
default: null
},
color: {
type: String,
default: null
},
trend: {
type: String,
default: null
},
trendType: {
type: String,
default: null
}
})
number: {
type: Number,
default: 0,
},
icon: {
type: String,
default: null,
},
prefix: {
type: String,
default: null,
},
suffix: {
type: String,
default: null,
},
label: {
type: String,
default: null,
},
color: {
type: String,
default: null,
},
trend: {
type: String,
default: null,
},
trendType: {
type: String,
default: null,
},
});
</script>
<template>
<CardBox>
<BaseLevel v-if="trend" class="mb-3" mobile>
<PillTagTrend :trend="trend" :trend-type="trendType" small />
<BaseButton :icon="mdiCog" icon-w="w-4" icon-h="h-4" color="white" small />
</BaseLevel>
<BaseLevel mobile>
<div>
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
{{ label }}
</h3>
<h1 class="text-3xl leading-tight font-semibold">
<NumberDynamic :value="number" :prefix="prefix" :suffix="suffix" />
</h1>
</div>
<BaseIcon v-if="icon" :path="icon" size="48" w="" h="h-16" :class="color" />
</BaseLevel>
</CardBox>
<CardBox>
<BaseLevel v-if="trend" class="mb-3" mobile>
<PillTagTrend :trend="trend" :trend-type="trendType" small />
<BaseButton :icon="mdiCog" icon-w="w-4" icon-h="h-4" color="white" small />
</BaseLevel>
<BaseLevel mobile>
<div>
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
{{ label }}
</h3>
<h1 class="text-3xl leading-tight font-semibold">
<NumberDynamic :value="number" :prefix="prefix" :suffix="suffix" />
</h1>
</div>
<BaseIcon v-if="icon" :path="icon" size="48" w="" h="h-16" :class="color" />
</BaseLevel>
</CardBox>
</template>

88
resources/js/Components/Charts/LineChart.vue
View file

@ -1,62 +1,54 @@
<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import {
Chart,
LineElement,
PointElement,
LineController,
LinearScale,
CategoryScale,
Tooltip
} from 'chart.js'
import { ref, watch, computed, onMounted } from 'vue';
import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip } from 'chart.js';
const props = defineProps({
data: {
type: Object,
required: true
}
})
data: {
type: Object,
required: true,
},
});
const root = ref(null)
const root = ref(null);
let chart
let chart;
Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip);
onMounted(() => {
chart = new Chart(root.value, {
type: 'line',
data: props.data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
display: false
chart = new Chart(root.value, {
type: 'line',
data: props.data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
display: false,
},
x: {
display: true,
},
},
plugins: {
legend: {
display: false,
},
},
},
x: {
display: true
}
},
plugins: {
legend: {
display: false
}
}
});
});
const chartData = computed(() => props.data);
watch(chartData, (data) => {
if (chart) {
chart.data = data;
chart.update();
}
})
})
const chartData = computed(() => props.data)
watch(chartData, data => {
if (chart) {
chart.data = data
chart.update()
}
})
});
</script>
<template>
<canvas ref="root" />
<canvas ref="root" />
</template>

35
resources/js/Components/FooterBar.vue
View file

@ -1,26 +1,25 @@
<script setup>
import { computed } from 'vue'
import { computed } from 'vue';
import { containerMaxW } from '@/config.js';
import BaseLevel from '@/Components/BaseLevel.vue'
import JustboilLogo from '@/Components/JustboilLogo.vue'
import BaseLevel from '@/Components/BaseLevel.vue';
import JustboilLogo from '@/Components/JustboilLogo.vue';
const year = computed(() => new Date().getFullYear())
const year = computed(() => new Date().getFullYear());
</script>
<template>
<footer class="py-2 px-6">
<BaseLevel :class="containerMaxW">
<div class="text-center md:text-left">
<b>&copy;{{ year }}, <a href="https://tethys.at/" target="_blank">
Tethys.at</a>.</b>
<!-- Get more with <a href="https://tailwind-vue.justboil.me/" target="_blank" class="text-blue-600">Premium
<footer class="py-2 px-6">
<BaseLevel :class="containerMaxW">
<div class="text-center md:text-left">
<b>&copy;{{ year }}, <a href="https://tethys.at/" target="_blank"> Tethys.at</a>.</b>
<!-- Get more with <a href="https://tailwind-vue.justboil.me/" target="_blank" class="text-blue-600">Premium
version</a> -->
</div>
<div class="md:py-3">
<a href="https://www.tethys.at" target="_blank">
<JustboilLogo class="w-auto h-8 md:h-6" />
</a>
</div>
</BaseLevel>
</footer>
</div>
<div class="md:py-3">
<a href="https://www.tethys.at" target="_blank">
<JustboilLogo class="w-auto h-8 md:h-6" />
</a>
</div>
</BaseLevel>
</footer>
</template>

78
resources/js/Components/FormCheckRadio.vue
View file

@ -2,50 +2,42 @@
import { computed } from 'vue';
const props = defineProps({
name: {
type: String,
required: true
},
type: {
type: String,
default: 'checkbox',
validator: value => ['checkbox', 'radio', 'switch'].includes(value)
},
label: {
type: String,
default: null
},
modelValue: {
type: [Array, String, Number, Boolean],
default: null
},
inputValue: {
type: [String, Number, Boolean],
required: true
}
})
const emit = defineEmits(['update:modelValue'])
name: {
type: String,
required: true,
},
type: {
type: String,
default: 'checkbox',
validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
},
label: {
type: String,
default: null,
},
modelValue: {
type: [Array, String, Number, Boolean],
default: null,
},
inputValue: {
type: [String, Number, Boolean],
required: true,
},
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
get: () => props.modelValue,
set: value => {
emit('update:modelValue', value)
}
})
const inputType = computed(() => props.type === 'radio' ? 'radio' : 'checkbox')
get: () => props.modelValue,
set: (value) => {
emit('update:modelValue', value);
},
});
const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'));
</script>
<template>
<label
:class="type"
class="mr-6 mb-3 last:mr-0"
>
<input
v-model="computedValue"
:type="inputType"
:name="name"
:value="inputValue"
>
<span class="check" />
<span class="pl-2">{{ label }}</span>
</label>
</template>
<label :class="type" class="mr-6 mb-3 last:mr-0">
<input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
<span class="check" />
<span class="pl-2">{{ label }}</span>
</label>
</template>

97
resources/js/Components/FormCheckRadioGroup.vue
View file

@ -1,57 +1,54 @@
<script setup>
import { computed } from 'vue'
import FormCheckRadio from '@/Components/FormCheckRadio.vue'
import { computed } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
const props = defineProps({
options: {
type: Object,
default: () => {}
},
name: {
type: String,
required: true
},
type: {
type: String,
default: 'checkbox',
validator: value => ['checkbox', 'radio', 'switch'].includes(value)
},
componentClass: {
type: String,
default: null
},
isColumn: Boolean,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: null
}
})
const emit = defineEmits(['update:modelValue'])
options: {
type: Object,
default: () => {},
},
name: {
type: String,
required: true,
},
type: {
type: String,
default: 'checkbox',
validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
},
componentClass: {
type: String,
default: null,
},
isColumn: Boolean,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: null,
},
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
get: () => props.modelValue,
set: value => {
emit('update:modelValue', value)
}
})
get: () => props.modelValue,
set: (value) => {
emit('update:modelValue', value);
},
});
</script>
<template>
<div
class="flex justify-start flex-wrap -mb-3"
:class="{ 'flex-col': isColumn }"
>
<!-- :input-value="key" -->
<!-- :label="value" -->
<!-- :input-value="value.id"
<div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
<!-- :input-value="key" -->
<!-- :label="value" -->
<!-- :input-value="value.id"
:label="value.name" -->
<FormCheckRadio
v-for="(value, key) in options"
:key="key"
v-model="computedValue"
:type="type"
:name="name"
:input-value="key"
:label="value"
:class="componentClass"
/>
</div>
</template>
<FormCheckRadio
v-for="(value, key) in options"
:key="key"
v-model="computedValue"
:type="type"
:name="name"
:input-value="key"
:label="value"
:class="componentClass"
/>
</div>
</template>

14
resources/js/Components/FormValidationErrors.vue
View file

@ -7,16 +7,16 @@ import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';
// const hasErrors = computed(() => Object.keys(props.errors.value).length > 0);
const props = defineProps({
errors: Object,
errors: Object,
});
const hasErrors = computed(() =>{
return props.errors != null && Object.keys(props.errors).length > 0;
const hasErrors = computed(() => {
return props.errors != null && Object.keys(props.errors).length > 0;
});
</script>
<template>
<NotificationBarInCard v-if="hasErrors" color="danger">
<b>Whoops! Something went wrong.</b>
<span v-for="(error, key) in errors" :key="key">{{ error }}</span>
</NotificationBarInCard>
<NotificationBarInCard v-if="hasErrors" color="danger">
<b>Whoops! Something went wrong.</b>
<span v-for="(error, key) in errors" :key="key">{{ error }}</span>
</NotificationBarInCard>
</template>

17
resources/js/Components/Header.vue
View file

@ -1,6 +1,5 @@
<template>
<div class="bg-slate-100 py-3 px-6 flex justify-between items-center mb-6">
<div class="flex items-center space-x-6">
<h3 class="font-bold">AdonisJS InertiaJS Example</h3>
<nav class="flex items-center text-sm">
@ -20,13 +19,13 @@ import { Link } from '@inertiajs/vue3';
// import DefaultLayout from '../Layouts/Default.vue';
export default {
// layout: DefaultLayout,
props: {
testing: String,
},
// layout: DefaultLayout,
props: {
testing: String,
},
components: {
Link
}
}
components: {
Link,
},
};
</script>

48
resources/js/Components/IconRounded.vue
View file

@ -4,32 +4,32 @@ import BaseIcon from '@/Components/BaseIcon.vue';
defineProps({
icon: {
type: String,
required: true,
},
type: {
type: String,
default: null,
},
w: {
type: String,
default: 'w-12',
},
h: {
type: String,
default: 'h-12',
},
bg: Boolean,
type: String,
required: true,
},
type: {
type: String,
default: null,
},
w: {
type: String,
default: 'w-12',
},
h: {
type: String,
default: 'h-12',
},
bg: Boolean,
});
</script>
<template>
<BaseIcon
:path="icon"
:w="w"
:h="h"
size="24"
class="rounded-full"
:class="bg ? colorsBgLight[type] : [colorsText[type], 'bg-gray-50 dark:bg-slate-800']"
/>
<BaseIcon
:path="icon"
:w="w"
:h="h"
size="24"
class="rounded-full"
:class="bg ? colorsBgLight[type] : [colorsText[type], 'bg-gray-50 dark:bg-slate-800']"
/>
</template>

2
resources/js/Components/Icons/Language.vue
View file

@ -1,5 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="my-svg-component">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="my-svg-component">
<path
fill-rule="evenodd"
d="M9 2.25a.75.75 0 01.75.75v1.506a49.38 49.38 0 015.343.371.75.75 0 11-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 01-2.969 6.323c.317.384.65.753.998 1.107a.75.75 0 11-1.07 1.052A18.902 18.902 0 019 13.687a18.823 18.823 0 01-5.656 4.482.75.75 0 11-.688-1.333 17.323 17.323 0 005.396-4.353A18.72 18.72 0 015.89 8.598a.75.75 0 011.388-.568A17.21 17.21 0 009 11.224a17.17 17.17 0 002.391-5.165 48.038 48.038 0 00-8.298.307.75.75 0 01-.186-1.489 49.159 49.159 0 015.343-.371V3A.75.75 0 019 2.25zM15.75 9a.75.75 0 01.68.433l5.25 11.25a.75.75 0 01-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 01-1.36-.634l5.25-11.25A.75.75 0 0115.75 9zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726z"

3
resources/js/Components/Icons/Wizard.vue
View file

@ -21,7 +21,8 @@
</div>
</div>
</div>
<div v-if="!isLastStep"
<div
v-if="!isLastStep"
class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
:class="[isChecked ? 'border-teal-600' : 'border-gray-300']"
></div>

295
resources/js/Components/Map/SearchMap.vue Normal file
View file

@ -0,0 +1,295 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref, Ref, defineProps, computed } from 'vue';
import SectionMain from '@/Components/SectionMain.vue';
import { Map } from 'leaflet/src/map/index';
import { Rectangle } from 'leaflet';
import { canvas } from 'leaflet/src/layer/vector/Canvas';
import { svg } from 'leaflet/src/layer/vector/SVG';
import axios from 'axios';
import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
// import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
import { TileLayer } from 'leaflet/src/layer/tile/TileLayer';
import { Attribution } from 'leaflet/src/control/Control.Attribution';
import DrawControlComponent from '@/Components/Map/draw.component.vue';
import ZoomControlComponent from '@/Components/Map/zoom.component.vue';
import { MapService } from '@/Stores/map.service';
import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
import { OpensearchDocument } from '@/Dataset';
Map.include({
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({ pane: name });
this._paneRenderers[name] = renderer;
}
return renderer;
},
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
},
});
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
// const OPEN_SEARCH_HOST = 'http://localhost:9200';
const OPEN_SEARCH_HOST = 'http://192.168.21.18';
let map: Map;
const props = defineProps({
dheckable: Boolean,
datasets: {
type: Array<OpensearchDocument>,
default: () => [],
},
mapId: {
type: String,
default: 'map',
},
mapOptions: {
type: Object,
default: () => ({
center: [48.208174, 16.373819],
zoom: 3,
zoomControl: false,
attributionControl: false,
}),
},
});
const items = computed({
get() {
return props.datasets;
},
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.datasets.length = 0;
props.datasets.push(...value);
},
});
const fitBounds: LatLngBoundsExpression = [
[46.4318173285, 9.47996951665],
[49.0390742051, 16.9796667823],
];
// const mapId = 'map';
const drawControl: Ref<DrawControlComponent | null> = ref(null);
const southWest = ref(null);
const northEast = ref(null);
const mapService = MapService();
// const coverage = {
// x_min: undefined,
// y_min: undefined,
// x_max: undefined,
// y_max: undefined,
// elevation_min: undefined,
// elevation_max: undefined,
// elevation_absolut: undefined,
// depth_min: undefined,
// depth_max: undefined,
// depth_absolut: undefined,
// time_min: undefined,
// time_max: undefined,
// time_absolut: undefined,
// };
const filterLayerGroup = new LayerGroup();
// Replace with your actual data
// const datasets: Ref<OpensearchDocument[]> = ref([]);
onMounted(() => {
initMap();
});
onUnmounted(() => {
map.off('zoomend zoomlevelschange');
});
const initMap = async () => {
// init leaflet map
map = new Map('map', props.mapOptions);
mapService.setMap(props.mapId, map);
map.scrollWheelZoom.disable();
map.fitBounds(fitBounds);
drawControl.value?.toggleDraw();
map.addLayer(filterLayerGroup);
const attributionControl = new Attribution().addTo(map);
attributionControl.setPrefix(false);
// let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
// format: 'image/png',
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
// layers: 'OSM-WMS',
// });
let baseAt = new TileLayer('https://{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png', {
subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
});
let layerOptions = {
label: DEFAULT_BASE_LAYER_NAME,
visible: true,
layer: baseAt,
};
layerOptions.layer.addTo(map);
map.on('Draw.Event.CREATED', handleDrawEventCreated);
// // const query = {
// // query: {
// // term: {
// // id: "103"
// // }
// // }
// // };
// // to do : call extra method:
// const query = {
// // q: 'id:103'
// // q: 'author:"Iglseder, Christoph" OR title:"Datensatz"',
// // q: 'author:"Iglseder"',
// q: '*',
// _source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
// size: 1000
// // qf:"title^3 author^2 subject^1",
// }
// try {
// let response = await axios({
// method: 'GET',
// url: OPEN_SEARCH_HOST + '/tethys-records/_search',
// headers: { 'Content-Type': 'application/json' },
// params: query
// });
// // Loop through the hits in the response
// response.data.hits.hits.forEach(hit => {
// // Get the geo_location attribute
// // var geo_location = hit._source.geo_location;
// let xMin = hit._source.bbox_xmin;
// let xMax = hit._source.bbox_xmax;
// let yMin = hit._source.bbox_ymin;
// let yMax = hit._source.bbox_ymax;
// var bbox: LatLngBoundsExpression = [[yMin, xMin], [yMax, xMax]];
// // Parse the WKT string to get the bounding box coordinates
// // var bbox = wktToBbox(geo_location);
// // // Add the bounding box to the map as a rectangle
// new Rectangle(bbox, { color: "#ff7800", weight: 1 }).addTo(map);
// // console.log(hit._source);
// });
// } catch (error) {
// console.error(error);
// }
};
const handleDrawEventCreated = async (event) => {
filterLayerGroup.clearLayers();
items.value = [];
let layer = event.layer;
let bounds = layer.getBounds();
// coverage.x_min = bounds.getSouthWest().lng;
// coverage.y_min = bounds.getSouthWest().lat;
// coverage.x_max = bounds.getNorthEast().lng;
// coverage.y_max = bounds.getNorthEast().lat;
try {
let response = await axios({
method: 'POST',
url: OPEN_SEARCH_HOST + '/tethys-records/_search',
headers: { 'Content-Type': 'application/json' },
data: {
size: 1000,
query: {
bool: {
must: {
match_all: {},
},
filter: {
geo_shape: {
geo_location: {
// replace 'location' with your geo-point field name
shape: {
type: 'envelope',
coordinates: [
[bounds.getSouthWest().lng, bounds.getNorthEast().lat],
[bounds.getNorthEast().lng, bounds.getSouthWest().lat],
],
},
relation: 'within',
},
},
},
// _source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
// "size": 1000
},
},
},
});
// Loop through the hits in the response
response.data.hits.hits.forEach((hit) => {
// Get the geo_location attribute
// var geo_location = hit._source.geo_location;
let xMin = hit._source.bbox_xmin;
let xMax = hit._source.bbox_xmax;
let yMin = hit._source.bbox_ymin;
let yMax = hit._source.bbox_ymax;
var bbox: LatLngBoundsExpression = [
[yMin, xMin],
[yMax, xMax],
];
// Parse the WKT string to get the bounding box coordinates
// var bbox = wktToBbox(geo_location);
// // Add the bounding box to the map as a rectangle
let rect = new Rectangle(bbox, { color: '#ff7800', weight: 1 });
filterLayerGroup.addLayer(rect);
// add to result list
items.value.push(hit._source);
});
} catch (error) {
console.error(error);
}
};
</script>
<template>
<SectionMain>
<div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
<ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
<DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest" :northEast="northEast">
</DrawControlComponent>
</div>
</SectionMain>
<!-- </section> -->
</template>

17
resources/js/Components/Map/draw.component.vue
View file

@ -4,10 +4,13 @@
<fa-icon [icon]="faSearchLocation"></fa-icon>
</button> -->
<!-- -->
<button ref="inputDraw"
<button
ref="inputDraw"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
type="button" :class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
@click.prevent="toggleDraw">
type="button"
:class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
@click.prevent="toggleDraw"
>
<BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
</button>
</div>
@ -53,15 +56,14 @@ export default class DrawControlComponent extends Vue {
metric: true, // Whether to use the metric measurement system or imperial
};
@Prop() public mapId: string;
// @Prop() public map: Map;
@Prop public southWest: LatLngBounds;
@Prop public northEast: LatLngBounds;
@Prop({
default: true
}) public preserve: boolean;
default: true,
})
public preserve: boolean;
mapService = MapService();
public _enabled;
@ -97,7 +99,6 @@ export default class DrawControlComponent extends Vue {
// @Ref('inputDraw') private _inputDraw: HTMLElement;
private addHooks() {
// L.Draw.Feature.prototype.addHooks.call(this);
this._map = this.mapService.getMap(this.mapId);

213
resources/js/Components/NavBar.vue
View file

@ -1,8 +1,8 @@
<script lang="ts" setup>
import { usePage, router } from '@inertiajs/vue3'
<script lang="ts" setup>
import { usePage, router } from '@inertiajs/vue3';
// import { usePage } from '@inertiajs/inertia-vue3';
// import { Inertia } from '@inertiajs/inertia';
import {ComputedRef} from "vue";
import { ComputedRef } from 'vue';
import { computed, ref } from 'vue';
import { containerMaxW } from '@/config.js';
@ -10,21 +10,21 @@ import { containerMaxW } from '@/config.js';
import { StyleService } from '@/Stores/style';
import { LayoutService } from '@/Stores/layout';
import {
mdiForwardburger,
mdiBackburger,
mdiClose,
mdiDotsVertical,
mdiMenu,
// mdiClockOutline,
mdiCloudDownloadOutline,
mdiCloud,
mdiCrop,
mdiAccount,
mdiCogOutline,
mdiEmail,
mdiLogout,
mdiGithub,
mdiThemeLightDark,
mdiForwardburger,
mdiBackburger,
mdiClose,
mdiDotsVertical,
mdiMenu,
// mdiClockOutline,
mdiCloudDownloadOutline,
mdiCloud,
mdiCrop,
mdiAccount,
mdiCogOutline,
mdiEmail,
mdiLogout,
mdiGithub,
mdiThemeLightDark,
} from '@mdi/js';
import NavBarItem from '@/Components/NavBarItem.vue';
import NavBarItemLabel from '@/Components/NavBarItemLabel.vue';
@ -34,15 +34,13 @@ import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
import NavBarSearch from '@/Components/NavBarSearch.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import type User from "App/Models/User";
import type User from 'App/Models/User';
// const mainStore = MainService();
// const userName = computed(() =>mainStore.userName);
const styleService = StyleService();
// const props = defineProps({
// const props = defineProps({
// user: {
// type: Object,
// default: () => ({}),
@ -50,13 +48,13 @@ const styleService = StyleService();
// });
// const userName = computed(() => usePage().props.user.login)
const user: ComputedRef<User>= computed(() => {
return usePage().props.authUser as User;
const user: ComputedRef<User> = computed(() => {
return usePage().props.authUser as User;
});
// const userName = computed(() => props.user.login)
const toggleLightDark = () => {
styleService.setDarkMode();
styleService.setDarkMode();
};
const layoutStore = LayoutService();
@ -64,108 +62,101 @@ const layoutStore = LayoutService();
const isMenuNavBarActive = ref(false);
const menuNavBarToggle = () => {
isMenuNavBarActive.value = !isMenuNavBarActive.value;
isMenuNavBarActive.value = !isMenuNavBarActive.value;
};
const menuOpenLg = () => {
layoutStore.isAsideLgActive = true;
layoutStore.isAsideLgActive = true;
};
// const logout = () => {
// // router.post(route('logout'))
// Inertia.get(stardust.route('app.index'));
// };
const logout = async() => {
// router.post(route('logout'));
await router.post(stardust.route('logout'));
const logout = async () => {
// router.post(route('logout'));
await router.post(stardust.route('logout'));
};
</script>
<template>
<nav
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
>
<div class="flex lg:items-stretch" :class="containerMaxW">
<div class="flex-1 items-stretch flex h-14">
<NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()">
<BaseIcon
:path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger"
size="24"
/>
</NavBarItem>
<NavBarItem type="hidden lg:flex xl:hidden" @click.prevent="menuOpenLg">
<BaseIcon :path="mdiMenu" size="24" />
</NavBarItem>
<NavBarItem>
<NavBarSearch />
</NavBarItem>
</div>
<div class="flex-none items-stretch flex h-14 lg:hidden">
<NavBarItem @click.prevent="menuNavBarToggle">
<BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
</NavBarItem>
</div>
<div
class="absolute w-screen top-14 left-0 bg-gray-50 shadow lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
:class="[isMenuNavBarActive ? 'block' : 'hidden']"
>
<div
class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto"
>
<NavBarMenu>
<NavBarItemLabel :icon="mdiMenu" label="Help menu" />
<template #dropdown>
<!-- <NavBarItem>
<nav class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800">
<div class="flex lg:items-stretch" :class="containerMaxW">
<div class="flex-1 items-stretch flex h-14">
<NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()">
<BaseIcon :path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger" size="24" />
</NavBarItem>
<NavBarItem type="hidden lg:flex xl:hidden" @click.prevent="menuOpenLg">
<BaseIcon :path="mdiMenu" size="24" />
</NavBarItem>
<NavBarItem>
<NavBarSearch />
</NavBarItem>
</div>
<div class="flex-none items-stretch flex h-14 lg:hidden">
<NavBarItem @click.prevent="menuNavBarToggle">
<BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
</NavBarItem>
</div>
<div
class="absolute w-screen top-14 left-0 bg-gray-50 shadow lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
:class="[isMenuNavBarActive ? 'block' : 'hidden']"
>
<div class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto">
<NavBarMenu>
<NavBarItemLabel :icon="mdiMenu" label="Help menu" />
<template #dropdown>
<!-- <NavBarItem>
<NavBarItemLabel :icon="mdiClockOutline" label="Item One" />
</NavBarItem> -->
<NavBarItem href="/docs/HandbuchTethys.pdf" target="_blank">
<NavBarItemLabel :icon="mdiCloudDownloadOutline" label="Tethys Manual" />
</NavBarItem>
<NavBarItem href="/docs/geopackage_v01.pdf" target="_blank">
<NavBarItemLabel :icon="mdiCloud" label="GeoPackage Help" />
</NavBarItem>
<BaseDivider nav-bar />
<NavBarItem>
<NavBarItemLabel :icon="mdiCrop" label="Item Last" />
</NavBarItem>
</template>
</NavBarMenu>
<NavBarItem href="/docs/HandbuchTethys.pdf" target="_blank">
<NavBarItemLabel :icon="mdiCloudDownloadOutline" label="Tethys Manual" />
</NavBarItem>
<NavBarItem href="/docs/geopackage_v01.pdf" target="_blank">
<NavBarItemLabel :icon="mdiCloud" label="GeoPackage Help" />
</NavBarItem>
<BaseDivider nav-bar />
<NavBarItem>
<NavBarItemLabel :icon="mdiCrop" label="Item Last" />
</NavBarItem>
</template>
</NavBarMenu>
<NavBarMenu>
<NavBarItemLabel v-bind:label="user.login">
<UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
</NavBarItemLabel>
<NavBarMenu>
<NavBarItemLabel v-bind:label="user.login">
<UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
</NavBarItemLabel>
<template #dropdown>
<!-- <NavBarItem> -->
<!-- <NavBarItem route-name="admin.account.info"> -->
<NavBarItem :route-name="'admin.account.info'" >
<NavBarItemLabel :icon="mdiAccount" label="My Profile" />
</NavBarItem>
<NavBarItem :route-name="'settings'">
<NavBarItemLabel :icon="mdiCogOutline" label="Settings" />
</NavBarItem>
<NavBarItem>
<NavBarItemLabel :icon="mdiEmail" label="Messages" />
</NavBarItem>
<BaseDivider nav-bar />
<NavBarItem @click="logout">
<NavBarItemLabel :icon="mdiLogout" label="Log Out" />
</NavBarItem>
</template>
</NavBarMenu>
<template #dropdown>
<!-- <NavBarItem> -->
<!-- <NavBarItem route-name="admin.account.info"> -->
<NavBarItem :route-name="'admin.account.info'">
<NavBarItemLabel :icon="mdiAccount" label="My Profile" />
</NavBarItem>
<NavBarItem :route-name="'settings'">
<NavBarItemLabel :icon="mdiCogOutline" label="Settings" />
</NavBarItem>
<NavBarItem>
<NavBarItemLabel :icon="mdiEmail" label="Messages" />
</NavBarItem>
<BaseDivider nav-bar />
<NavBarItem @click="logout">
<NavBarItemLabel :icon="mdiLogout" label="Log Out" />
</NavBarItem>
</template>
</NavBarMenu>
<NavBarItem is-desktop-icon-only @click.prevent="toggleLightDark">
<NavBarItemLabel v-bind:icon="mdiThemeLightDark" label="Light/Dark" is-desktop-icon-only />
</NavBarItem>
<NavBarItem href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" is-desktop-icon-only>
<NavBarItemLabel v-bind:icon="mdiGithub" label="GitHub" is-desktop-icon-only />
</NavBarItem>
<NavBarItem is-desktop-icon-only @click="logout">
<NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
</NavBarItem>
</div>
</div>
</div>
</nav>
<NavBarItem is-desktop-icon-only @click.prevent="toggleLightDark">
<NavBarItemLabel v-bind:icon="mdiThemeLightDark" label="Light/Dark" is-desktop-icon-only />
</NavBarItem>
<NavBarItem href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" is-desktop-icon-only>
<NavBarItemLabel v-bind:icon="mdiGithub" label="GitHub" is-desktop-icon-only />
</NavBarItem>
<NavBarItem is-desktop-icon-only @click="logout">
<NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
</NavBarItem>
</div>
</div>
</div>
</nav>
</template>

132
resources/js/Components/NavBarItem.vue
View file

@ -1,90 +1,90 @@
<script setup>
import { StyleService } from '@/Stores/style'
import { StyleService } from '@/Stores/style';
// import { Link } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3'
import { computed } from 'vue'
import { Link } from '@inertiajs/vue3';
import { computed } from 'vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
href: {
type: String,
default: null
},
routeName: {
type: String,
default: null
},
param:{
type:Number
},
type: {
type: String,
default: 'flex'
},
activeColor: {
type: String,
default: null
},
isDesktopIconOnly: Boolean,
dropdown: Boolean,
active: Boolean
})
href: {
type: String,
default: null,
},
routeName: {
type: String,
default: null,
},
param: {
type: Number,
},
type: {
type: String,
default: 'flex',
},
activeColor: {
type: String,
default: null,
},
isDesktopIconOnly: Boolean,
dropdown: Boolean,
active: Boolean,
});
const is = computed(() => {
if (props.href) {
return 'a'
}
if (props.href) {
return 'a';
}
if (props.routeName) {
return Link
}
if (props.routeName) {
return Link;
}
return 'div'
})
return 'div';
});
const styleStore = StyleService()
const styleStore = StyleService();
const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`;
const activeClass = computed(
// () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
() => props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
)
// () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
() => (props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null),
);
// const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));
const componentClass = computed(() => {
const base = [
props.type,
props.active
? activeColor
: `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`
]
const base = [
props.type,
props.active
? activeColor
: `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
];
if (props.type === 'block') {
base.push('lg:flex')
}
if (props.type === 'block') {
base.push('lg:flex');
}
if (!props.dropdown) {
base.push('py-2', 'px-3')
} else {
base.push('p-0', 'lg:py-2', 'lg:px-3')
}
if (!props.dropdown) {
base.push('py-2', 'px-3');
} else {
base.push('p-0', 'lg:py-2', 'lg:px-3');
}
if (props.isDesktopIconOnly) {
base.push('lg:w-16', 'lg:justify-center')
}
if (props.isDesktopIconOnly) {
base.push('lg:w-16', 'lg:justify-center');
}
return base
})
return base;
});
</script>
<template>
<component
:is="is"
class="items-center grow-0 shrink-0 relative cursor-pointer"
:class="[componentClass, activeClass]"
:href="routeName ? stardust.route(props.routeName, [props.param]) : href"
>
<slot />
</component>
<component
:is="is"
class="items-center grow-0 shrink-0 relative cursor-pointer"
:class="[componentClass, activeClass]"
:href="routeName ? stardust.route(props.routeName, [props.param]) : href"
>
<slot />
</component>
</template>

35
resources/js/Components/NavBarItemLabel.vue
View file

@ -1,28 +1,21 @@
<script setup>
import BaseIcon from '@/Components/BaseIcon.vue'
import BaseIcon from '@/Components/BaseIcon.vue';
defineProps({
icon: {
type: String,
default: null
},
label: {
type: String,
required: true
},
isDesktopIconOnly: Boolean
})
icon: {
type: String,
default: null,
},
label: {
type: String,
required: true,
},
isDesktopIconOnly: Boolean,
});
</script>
<template>
<slot />
<BaseIcon
v-if="icon"
:path="icon"
class="transition-colors"
/>
<span
class="px-2 transition-colors"
:class="{ 'lg:hidden':isDesktopIconOnly && icon }"
>{{ label }}</span>
<slot />
<BaseIcon v-if="icon" :path="icon" class="transition-colors" />
<span class="px-2 transition-colors" :class="{ 'lg:hidden': isDesktopIconOnly && icon }">{{ label }}</span>
</template>

81
resources/js/Components/NavBarMenu.vue
View file

@ -1,62 +1,51 @@
<script setup>
import { StyleService } from '@/Stores/style'
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
import NavBarItem from '@/Components/NavBarItem.vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import { StyleService } from '@/Stores/style';
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { mdiChevronUp, mdiChevronDown } from '@mdi/js';
import NavBarItem from '@/Components/NavBarItem.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
const styleStore = StyleService()
const styleStore = StyleService();
const isDropdownActive = ref(false)
const isDropdownActive = ref(false);
const toggleDropdownIcon = computed(() => isDropdownActive.value ? mdiChevronUp : mdiChevronDown)
const toggleDropdownIcon = computed(() => (isDropdownActive.value ? mdiChevronUp : mdiChevronDown));
const toggle = () => {
isDropdownActive.value = !isDropdownActive.value
}
isDropdownActive.value = !isDropdownActive.value;
};
const root = ref(null)
const root = ref(null);
const forceClose = event => {
if (!root.value.$el.contains(event.target)) {
isDropdownActive.value = false
}
}
const forceClose = (event) => {
if (!root.value.$el.contains(event.target)) {
isDropdownActive.value = false;
}
};
onMounted(() => {
window.addEventListener('click', forceClose)
})
window.addEventListener('click', forceClose);
});
onBeforeUnmount(() => {
window.removeEventListener('click', forceClose)
})
window.removeEventListener('click', forceClose);
});
</script>
<template>
<NavBarItem
ref="root"
type="block"
:active="isDropdownActive"
dropdown
@click="toggle"
>
<a
class="flex items-center py-2 px-3 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent"
:class="styleStore.navBarMenuListUpperLabelStyle"
>
<slot />
<BaseIcon
:path="toggleDropdownIcon"
class="hidden lg:inline-flex transition-colors"
/>
</a>
<div
class="-mx-px text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute
lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-b lg:dark:bg-slate-800
dark:border-slate-700"
:class="{'lg:hidden':!isDropdownActive}"
>
<slot name="dropdown" />
</div>
</NavBarItem>
<NavBarItem ref="root" type="block" :active="isDropdownActive" dropdown @click="toggle">
<a
class="flex items-center py-2 px-3 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent"
:class="styleStore.navBarMenuListUpperLabelStyle"
>
<slot />
<BaseIcon :path="toggleDropdownIcon" class="hidden lg:inline-flex transition-colors" />
</a>
<div
class="-mx-px text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-b lg:dark:bg-slate-800 dark:border-slate-700"
:class="{ 'lg:hidden': !isDropdownActive }"
>
<slot name="dropdown" />
</div>
</NavBarItem>
</template>

8
resources/js/Components/NavBarSearch.vue
View file

@ -3,11 +3,5 @@ import FormControl from '@/Components/FormControl.vue';
</script>
<template>
<FormControl
ref="root"
placeholder="Search (ctrl+k)"
ctrl-k-focus
transparent
borderless
/>
<FormControl ref="root" placeholder="Search (ctrl+k)" ctrl-k-focus transparent borderless />
</template>

87
resources/js/Components/NotificationBar.vue
View file

@ -1,68 +1,45 @@
<script setup>
import { ref, computed, useSlots } from 'vue'
import { mdiClose } from '@mdi/js'
import { colorsBgLight, colorsOutline } from '@/colors.js'
import BaseLevel from '@/Components/BaseLevel.vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import BaseButton from '@/Components/BaseButton.vue'
import { ref, computed, useSlots } from 'vue';
import { mdiClose } from '@mdi/js';
import { colorsBgLight, colorsOutline } from '@/colors.js';
import BaseLevel from '@/Components/BaseLevel.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
import BaseButton from '@/Components/BaseButton.vue';
const props = defineProps({
icon: {
type: String,
default: null
},
outline: Boolean,
color: {
type: String,
required: true
}
})
icon: {
type: String,
default: null,
},
outline: Boolean,
color: {
type: String,
required: true,
},
});
const componentClass = computed(() => props.outline
? colorsOutline[props.color]
: colorsBgLight[props.color]
)
const componentClass = computed(() => (props.outline ? colorsOutline[props.color] : colorsBgLight[props.color]));
const isDismissed = ref(false)
const isDismissed = ref(false);
const dismiss = () => {
isDismissed.value = true
}
isDismissed.value = true;
};
const slots = useSlots()
const slots = useSlots();
const hasRightSlot = computed(() => slots.right)
const hasRightSlot = computed(() => slots.right);
</script>
<template>
<div
v-if="!isDismissed"
:class="componentClass"
class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded transition-colors duration-150"
>
<BaseLevel>
<div class="flex flex-col md:flex-row items-center">
<BaseIcon
v-if="icon"
:path="icon"
w="w-10 md:w-5"
h="h-10 md:h-5"
size="24"
class="md:mr-2"
/>
<span class="text-center md:text-left"><slot /></span>
</div>
<slot
v-if="hasRightSlot"
name="right"
/>
<BaseButton
v-else
:icon="mdiClose"
:outline="outline"
small
@click="dismiss"
/>
</BaseLevel>
</div>
<div v-if="!isDismissed" :class="componentClass" class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded transition-colors duration-150">
<BaseLevel>
<div class="flex flex-col md:flex-row items-center">
<BaseIcon v-if="icon" :path="icon" w="w-10 md:w-5" h="h-10 md:h-5" size="24" class="md:mr-2" />
<span class="text-center md:text-left"><slot /></span>
</div>
<slot v-if="hasRightSlot" name="right" />
<BaseButton v-else :icon="mdiClose" :outline="outline" small @click="dismiss" />
</BaseLevel>
</div>
</template>

27
resources/js/Components/NotificationBarInCard.vue
View file

@ -2,23 +2,20 @@
import { colorsBgLight } from '@/colors.js';
defineProps({
color: {
type: String,
required: true,
},
isPlacedWithHeader: {
type: Boolean,
},
color: {
type: String,
required: true,
},
isPlacedWithHeader: {
type: Boolean,
},
});
</script>
<template>
<div class="flex flex-col mb-6 -mt-6 -mr-6 -ml-6 animate-fade-in">
<div
:class="[colorsBgLight[color], { 'rounded-t-xl': !isPlacedWithHeader }]"
class="flex flex-col p-6 transition-colors"
>
<slot />
</div>
</div>
<div class="flex flex-col mb-6 -mt-6 -mr-6 -ml-6 animate-fade-in">
<div :class="[colorsBgLight[color], { 'rounded-t-xl': !isPlacedWithHeader }]" class="flex flex-col p-6 transition-colors">
<slot />
</div>
</div>
</template>

84
resources/js/Components/NumberDynamic.vue
View file

@ -1,63 +1,61 @@
<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import numeral from 'numeral'
import { computed, ref, watch, onMounted } from 'vue';
import numeral from 'numeral';
const props = defineProps({
prefix: {
type: String,
default: null
},
suffix: {
type: String,
default: null
},
value: {
type: Number,
default: 0
},
duration: {
type: Number,
default: 500
}
})
prefix: {
type: String,
default: null,
},
suffix: {
type: String,
default: null,
},
value: {
type: Number,
default: 0,
},
duration: {
type: Number,
default: 500,
},
});
const newValue = ref(0)
const newValue = ref(0);
const newValueFormatted = computed(
() => newValue.value < 1000 ? newValue.value : numeral(newValue.value).format('0,0')
)
const newValueFormatted = computed(() => (newValue.value < 1000 ? newValue.value : numeral(newValue.value).format('0,0')));
const value = computed(() => props.value)
const value = computed(() => props.value);
const grow = m => {
const v = Math.ceil(newValue.value + m)
const grow = (m) => {
const v = Math.ceil(newValue.value + m);
if (v > value.value) {
newValue.value = value.value
return false
}
if (v > value.value) {
newValue.value = value.value;
return false;
}
newValue.value = v
newValue.value = v;
setTimeout(() => {
grow(m)
}, 25)
}
setTimeout(() => {
grow(m);
}, 25);
};
const growInit = () => {
newValue.value = 0
grow(props.value / (props.duration / 25))
}
newValue.value = 0;
grow(props.value / (props.duration / 25));
};
watch(value, () => {
growInit()
})
growInit();
});
onMounted(() => {
growInit()
})
growInit();
});
</script>
<template>
<div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
<div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
</template>

56
resources/js/Components/OverlayLayer.vue
View file

@ -2,32 +2,44 @@
import { StyleService } from '@/Stores/style';
defineProps({
zIndex: {
type: String,
default: 'z-50'
}
})
zIndex: {
type: String,
default: 'z-50',
},
});
const emit = defineEmits(['overlay-click'])
const emit = defineEmits(['overlay-click']);
const overlayClick = event => {
emit('overlay-click', event)
}
const overlayClick = (event) => {
emit('overlay-click', event);
};
const styleStore = StyleService()
const styleStore = StyleService();
</script>
<template>
<div class="flex items-center flex-col justify-center overflow-hidden fixed inset-0" :class="zIndex">
<transition enter-active-class="transition duration-150 ease-in" enter-from-class="opacity-0"
enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
leave-to-class="opacity-0">
<div class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
:class="styleStore.overlayStyle" @click="overlayClick" />
</transition>
<transition enter-active-class="transition duration-100 ease-out" enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100" leave-active-class="animate-fade-out">
<slot />
</transition>
</div>
<div class="flex items-center flex-col justify-center overflow-hidden fixed inset-0" :class="zIndex">
<transition
enter-active-class="transition duration-150 ease-in"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-150 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
:class="styleStore.overlayStyle"
@click="overlayClick"
/>
</transition>
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="animate-fade-out"
>
<slot />
</transition>
</div>
</template>

71
resources/js/Components/PillTagTrend.vue
View file

@ -1,53 +1,48 @@
<script setup>
import { computed } from 'vue'
import { mdiChevronUp, mdiChevronDown, mdiAlertCircleOutline } from '@mdi/js'
import PillTag from '@/Components/PillTag.vue'
import { computed } from 'vue';
import { mdiChevronUp, mdiChevronDown, mdiAlertCircleOutline } from '@mdi/js';
import PillTag from '@/Components/PillTag.vue';
const props = defineProps({
trend: {
type: String,
required: true
},
trendType: {
type: String,
default: null
},
small: Boolean
})
trend: {
type: String,
required: true,
},
trendType: {
type: String,
default: null,
},
small: Boolean,
});
const trendStyle = computed(() => {
if (props.trendType === 'up') {
return {
icon: mdiChevronUp,
style: 'success'
if (props.trendType === 'up') {
return {
icon: mdiChevronUp,
style: 'success',
};
}
}
if (props.trendType === 'down') {
return {
icon: mdiChevronDown,
style: 'danger'
if (props.trendType === 'down') {
return {
icon: mdiChevronDown,
style: 'danger',
};
}
}
if (props.trendType === 'alert') {
return {
icon: mdiAlertCircleOutline,
style: 'warning'
if (props.trendType === 'alert') {
return {
icon: mdiAlertCircleOutline,
style: 'warning',
};
}
}
return {
style: 'info'
}
})
return {
style: 'info',
};
});
</script>
<template>
<PillTag
:text="trend"
:type="trendStyle.style"
:icon="trendStyle.icon"
:small="small"
/>
<PillTag :text="trend" :type="trendStyle.style" :icon="trendStyle.icon" :small="small" />
</template>

7
resources/js/Components/ResponsiveNavLink.vue
View file

@ -4,9 +4,10 @@ import { Link } from '@inertiajs/vue3';
const props = defineProps(['href', 'active']);
const classes = computed(() => props.active
? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
: 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
const classes = computed(() =>
props.active
? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
: 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out',
);
</script>

9
resources/js/Components/SearchAutocomplete.vue
View file

@ -52,10 +52,10 @@
:key="i"
@click.prevent="setResult(result)"
:ref="
(el: HTMLLIElement) => {
ul[i] = el;
}
"
(el: HTMLLIElement) => {
ul[i] = el;
}
"
>
<svg class="absolute w-4 h-4 left-2 top-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
@ -167,7 +167,6 @@ watch(search, async () => {
await onChange();
});
// function onChange() {
// if (!props.source || !data.search) {
// return false;

18
resources/js/Components/SectionBannerStarOnGitea.vue
View file

@ -4,16 +4,10 @@ import BaseButton from '@/Components/BaseButton.vue';
import SectionBanner from '@/Components/SectionBanner.vue';
</script>
<template>
<SectionBanner bg="greenBlue">
<h1 class="text-3xl text-white mb-6">Like the project? Please star on <b>Gitea</b>!</h1>
<div>
<BaseButton
href="https://gitea.geologie.ac.at/geolba/tethys"
:icon="mdiGithub"
label="Gitea"
target="_blank"
rounded-full
/>
</div>
</SectionBanner>
<SectionBanner bg="greenBlue">
<h1 class="text-3xl text-white mb-6">Like the project? Please star on <b>Gitea</b>!</h1>
<div>
<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" :icon="mdiGithub" label="Gitea" target="_blank" rounded-full />
</div>
</SectionBanner>
</template>

27
resources/js/Components/SectionTitle.vue
View file

@ -1,22 +1,19 @@
<script setup>
defineProps({
custom: Boolean,
first: Boolean,
last: Boolean
})
custom: Boolean,
first: Boolean,
last: Boolean,
});
</script>
<template>
<section
class="py-24 px-6 lg:px-0 lg:max-w-2xl lg:mx-auto text-center"
:class="{ '-mb-6':first, '-mt-6':last, '-my-6':!first && !last }"
>
<slot v-if="custom" />
<h1
v-else
class="text-2xl text-gray-500 dark:text-slate-400"
<section
class="py-24 px-6 lg:px-0 lg:max-w-2xl lg:mx-auto text-center"
:class="{ '-mb-6': first, '-mt-6': last, '-my-6': !first && !last }"
>
<slot />
</h1>
</section>
<slot v-if="custom" />
<h1 v-else class="text-2xl text-gray-500 dark:text-slate-400">
<slot />
</h1>
</section>
</template>

75
resources/js/Components/SectionTitleLineWithButton.vue
View file

@ -1,56 +1,35 @@
<script setup>
import { mdiCog } from '@mdi/js'
import { useSlots, computed } from 'vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import BaseButton from '@/Components/BaseButton.vue'
import IconRounded from '@/Components/IconRounded.vue'
import { mdiCog } from '@mdi/js';
import { useSlots, computed } from 'vue';
import BaseIcon from '@/Components/BaseIcon.vue';
import BaseButton from '@/Components/BaseButton.vue';
import IconRounded from '@/Components/IconRounded.vue';
defineProps({
icon: {
type: String,
default: null
},
title: {
type: String,
required: true
},
main: Boolean
})
icon: {
type: String,
default: null,
},
title: {
type: String,
required: true,
},
main: Boolean,
});
const hasSlot = computed(() => useSlots().default)
const hasSlot = computed(() => useSlots().default);
</script>
<template>
<section
:class="{'pt-6':!main}"
class="mb-6 flex items-center justify-between"
>
<div class="flex items-center justify-start">
<IconRounded
v-if="icon && main"
:icon="icon"
type="light"
class="mr-3"
bg
/>
<BaseIcon
v-else-if="icon"
:path="icon"
class="mr-2"
size="20"
/>
<h1
:class="main ? 'text-3xl' : 'text-2xl'"
class="leading-tight"
>
{{ title }}
</h1>
</div>
<slot v-if="hasSlot" />
<BaseButton
v-else
:icon="mdiCog"
small
/>
</section>
<section :class="{ 'pt-6': !main }" class="mb-6 flex items-center justify-between">
<div class="flex items-center justify-start">
<IconRounded v-if="icon && main" :icon="icon" type="light" class="mr-3" bg />
<BaseIcon v-else-if="icon" :path="icon" class="mr-2" size="20" />
<h1 :class="main ? 'text-3xl' : 'text-2xl'" class="leading-tight">
{{ title }}
</h1>
</div>
<slot v-if="hasSlot" />
<BaseButton v-else :icon="mdiCog" small />
</section>
</template>

40
resources/js/Components/TableCheckboxCell.vue
View file

@ -1,33 +1,27 @@
<script setup>
import { ref, watch } from 'vue'
import { ref, watch } from 'vue';
defineProps({
type: {
type: String,
default: 'td'
}
})
type: {
type: String,
default: 'td',
},
});
const emit = defineEmits(['checked'])
const emit = defineEmits(['checked']);
const checked = ref(false)
const checked = ref(false);
watch(checked, newVal => {
emit('checked', newVal)
})
watch(checked, (newVal) => {
emit('checked', newVal);
});
</script>
<template>
<component
:is="type"
class="lg:w-1"
>
<label class="checkbox">
<input
v-model="checked"
type="checkbox"
>
<span class="check" />
</label>
</component>
<component :is="type" class="lg:w-1">
<label class="checkbox">
<input v-model="checked" type="checkbox" />
<span class="check" />
</label>
</component>
</template>

44
resources/js/Components/TableKeywords.vue
View file

@ -120,8 +120,7 @@ const removeItem = (key) => {
<UserAvatar :username="client.value" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
</td> -->
<td data-label="Type" scope="row">
<FormControl required v-model="item.type" :type="'select'" placeholder="[Enter Language]"
:options="props.subjectTypes">
<FormControl required v-model="item.type" :type="'select'" placeholder="[Enter Language]" :options="props.subjectTypes">
<div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.type`]">
{{ errors[`subjects.${index}.type`].join(', ') }}
</div>
@ -129,17 +128,21 @@ const removeItem = (key) => {
</td>
<td data-label="Value" scope="row">
<SearchCategoryAutocomplete v-if="item.type !== 'uncontrolled'" v-model="item.value" @subject="(language) => {
item.language = language;
}
">
<SearchCategoryAutocomplete
v-if="item.type !== 'uncontrolled'"
v-model="item.value"
@subject="
(language) => {
item.language = language;
}
"
>
<div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
{{ errors[`subjects.${index}.value`].join(', ') }}
</div>
</SearchCategoryAutocomplete>
<FormControl v-else required v-model="item.value" type="text" placeholder="[enter keyword value]"
:borderless="true">
<FormControl v-else required v-model="item.value" type="text" placeholder="[enter keyword value]" :borderless="true">
<div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
{{ errors[`subjects.${index}.value`].join(', ') }}
</div>
@ -147,8 +150,14 @@ const removeItem = (key) => {
</td>
<td data-label="Language" scope="row">
<FormControl required v-model="item.language" :type="'select'" placeholder="[Enter Lang]"
:options="{ de: 'de', en: 'en' }" :is-read-only="item.type != 'uncontrolled'">
<FormControl
required
v-model="item.language"
:type="'select'"
placeholder="[Enter Lang]"
:options="{ de: 'de', en: 'en' }"
:is-read-only="item.type != 'uncontrolled'"
>
<div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.language`]">
{{ errors[`subjects.${index}.language`].join(', ') }}
</div>
@ -157,8 +166,7 @@ const removeItem = (key) => {
<td class="before:hidden lg:w-1 whitespace-nowrap" scope="row">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
<BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small
@click.prevent="removeItem(index)" />
<BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small @click.prevent="removeItem(index)" />
</BaseButtons>
</td>
</tr>
@ -169,8 +177,15 @@ const removeItem = (key) => {
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
<BaseLevel>
<BaseButtons>
<BaseButton v-for="page in pagesList" :key="page" :active="page === currentPage" :label="page + 1" small
:outline="styleService.darkMode" @click="currentPage = page" />
<BaseButton
v-for="page in pagesList"
:key="page"
:active="page === currentPage"
:label="page + 1"
small
:outline="styleService.darkMode"
@click="currentPage = page"
/>
</BaseButtons>
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
</BaseLevel>
@ -182,7 +197,6 @@ const removeItem = (key) => {
</template>
<style scoped>
/* tr:nth-child(even) {
background: gray;
}

15
resources/js/Components/TablePersons.vue
View file

@ -169,10 +169,17 @@ const removeAuthor = (key) => {
{{ option }}
</option>
</select> -->
<FormControl required v-model="element.pivot_contributor_type" type="select"
:options="contributortypes" placeholder="[relation type]">
<div class="text-red-400 text-sm"
v-if="errors && Array.isArray(errors[`contributors.${index}.pivot_contributor_type`])">
<FormControl
required
v-model="element.pivot_contributor_type"
type="select"
:options="contributortypes"
placeholder="[relation type]"
>
<div
class="text-red-400 text-sm"
v-if="errors && Array.isArray(errors[`contributors.${index}.pivot_contributor_type`])"
>
{{ errors[`contributors.${index}.pivot_contributor_type`].join(', ') }}
</div>
</FormControl>

188
resources/js/Components/TableSampleClients.vue
View file

@ -11,7 +11,7 @@ import BaseButton from '@/Components/BaseButton.vue';
import UserAvatar from '@/Components/UserAvatar.vue';
defineProps({
checkable: Boolean,
checkable: Boolean,
});
const styleService = StyleService();
@ -24,117 +24,123 @@ const perPage = ref(5);
const currentPage = ref(0);
const checkedRows = ref([]);
const itemsPaginated = computed(() =>
items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1))
);
const itemsPaginated = computed(() => items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1)));
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
const currentPageHuman = computed(() => currentPage.value + 1);
const pagesList = computed(() => {
const pagesList = [];
const pagesList = [];
for (let i = 0; i < numPages.value; i++) {
pagesList.push(i);
}
for (let i = 0; i < numPages.value; i++) {
pagesList.push(i);
}
return pagesList;
return pagesList;
});
const remove = (arr, cb) => {
const newArr = [];
const newArr = [];
arr.forEach((item) => {
if (!cb(item)) {
newArr.push(item);
}
});
arr.forEach((item) => {
if (!cb(item)) {
newArr.push(item);
}
});
return newArr;
return newArr;
};
const checked = (isChecked, client) => {
if (isChecked) {
checkedRows.value.push(client);
} else {
checkedRows.value = remove(checkedRows.value, (row) => row.id === client.id);
}
if (isChecked) {
checkedRows.value.push(client);
} else {
checkedRows.value = remove(checkedRows.value, (row) => row.id === client.id);
}
};
</script>
<template>
<CardBoxModal v-model="isModalActive" title="Sample modal">
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
</CardBoxModal>
<CardBoxModal v-model="isModalActive" title="Sample modal">
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
</CardBoxModal>
<CardBoxModal v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel>
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
</CardBoxModal>
<CardBoxModal v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel>
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
</CardBoxModal>
<div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
<span v-for="checkedRow in checkedRows" :key="checkedRow.id"
class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700">
{{ checkedRow.name }}
</span>
</div>
<div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
<span
v-for="checkedRow in checkedRows"
:key="checkedRow.id"
class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700"
>
{{ checkedRow.name }}
</span>
</div>
<table>
<thead>
<tr>
<th v-if="checkable" />
<th />
<th>Name</th>
<th>Email</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th />
</tr>
</thead>
<tbody>
<tr v-for="client in itemsPaginated" :key="client.id">
<TableCheckboxCell v-if="checkable" @checked="checked($event, client)" />
<td class="border-b-0 lg:w-6 before:hidden">
<UserAvatar :username="client.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
</td>
<td data-label="Name">
{{ client.name }}
</td>
<td data-label="Email">
{{ client.email }}
</td>
<td data-label="City">
{{ client.city }}
</td>
<td data-label="Progress" class="lg:w-32">
<progress class="flex w-2/5 self-center lg:w-full" max="100" v-bind:value="client.progress">
{{ client.progress }}
</progress>
</td>
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
<small class="text-gray-500 dark:text-slate-400" :title="client.created">{{
client.created
}}</small>
</td>
<td class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" />
<BaseButton color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" />
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
<BaseLevel>
<BaseButtons>
<BaseButton v-for="page in pagesList" :key="page" :active="page === currentPage" :label="page + 1" small
:outline="styleService.darkMode" @click="currentPage = page" />
</BaseButtons>
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
</BaseLevel>
</div>
<table>
<thead>
<tr>
<th v-if="checkable" />
<th />
<th>Name</th>
<th>Email</th>
<th>City</th>
<th>Progress</th>
<th>Created</th>
<th />
</tr>
</thead>
<tbody>
<tr v-for="client in itemsPaginated" :key="client.id">
<TableCheckboxCell v-if="checkable" @checked="checked($event, client)" />
<td class="border-b-0 lg:w-6 before:hidden">
<UserAvatar :username="client.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
</td>
<td data-label="Name">
{{ client.name }}
</td>
<td data-label="Email">
{{ client.email }}
</td>
<td data-label="City">
{{ client.city }}
</td>
<td data-label="Progress" class="lg:w-32">
<progress class="flex w-2/5 self-center lg:w-full" max="100" v-bind:value="client.progress">
{{ client.progress }}
</progress>
</td>
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
<small class="text-gray-500 dark:text-slate-400" :title="client.created">{{ client.created }}</small>
</td>
<td class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" />
<BaseButton color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" />
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
<BaseLevel>
<BaseButtons>
<BaseButton
v-for="page in pagesList"
:key="page"
:active="page === currentPage"
:label="page + 1"
small
:outline="styleService.darkMode"
@click="currentPage = page"
/>
</BaseButtons>
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
</BaseLevel>
</div>
</template>

44
resources/js/Components/UserAvatar.vue
View file

@ -2,40 +2,36 @@
import { computed } from 'vue';
const props = defineProps({
username: {
type: String,
required: true,
},
avatar: {
type: String,
default: null,
},
api: {
type: String,
default: 'avataaars',
},
username: {
type: String,
required: true,
},
avatar: {
type: String,
default: null,
},
api: {
type: String,
default: 'avataaars',
},
});
const avatar = computed(
// () => props.avatar ?? `https://avatars.dicebear.com/api/${props.api}/${props.username?.replace(/[^a-z0-9]+/i, '-')}.svg`
// () => props.avatar ?? `https://avatars.dicebear.com/api/${props.api}/${props.username?.replace(/[^a-z0-9]+/i, '-')}.svg`
() => props.avatar ?? `https://avatars.dicebear.com/api/initials/${props.username}.svg`
() => props.avatar ?? `https://avatars.dicebear.com/api/initials/${props.username}.svg`,
// () => {
// () => {
// return props.avatar ?? `https://www.gravatar.com/avatar/${props.username}?s=50`;
// }
// return props.avatar ?? `https://www.gravatar.com/avatar/${props.username}?s=50`;
// }
);
const username = computed(() => props.username);
</script>
<template>
<div>
<img
:src="avatar"
:alt="username"
class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
/>
</div>
<div>
<img :src="avatar" :alt="username" class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800" />
</div>
</template>

10
resources/js/Components/unused/ApplicationLogo.vue
View file

@ -1,7 +1,7 @@
<template>
<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
<path
d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"
/>
</svg>
<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
<path
d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"
/>
</svg>
</template>

7
resources/js/Components/unused/Input.vue
View file

@ -15,5 +15,10 @@ onMounted(() => {
</script>
<template>
<input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
<input
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
ref="input"
/>
</template>