streaper2/maaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prettier fixes #16

Browse Source
This commit is contained in:
Michael Dausmann
2023-10-24 21:18:03 +11:00
parent dc9d64ebf5
commit a7f8c37f99
56 changed files with 1706 additions and 935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/AppFooter.vue
View File

@@ -1,7 +1,9 @@
<template>
<div class="sticky z-50 bottom-0 p-4 bg-base-200">
<span><NuxtLink to="/terms">Terms Of Service</NuxtLink></span>
<span>&nbsp;|&nbsp;<NuxtLink to="/privacy">Privacy</NuxtLink></span>
<span>&nbsp;|&nbsp;<button type="button" data-cc="c-settings">Cookie settings</button></span>
<NuxtLink to="/terms">Terms Of Service</NuxtLink>
<span class="px-2">|</span>
<NuxtLink to="/privacy">Privacy</NuxtLink>
<span class="px-2">|</span>
<button type="button" data-cc="c-settings">Cookie settings</button>
</div>
</template>

33
components/AppHeader.vue
View File

@@ -4,19 +4,34 @@
<template>
<div class="navbar bg-base-100">
<Notifications/>
<Notifications />
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<ul
tabindex="0"
class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<li v-if="user"><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
<li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
</ul>
</div>
<NuxtLink to="/" class="btn btn-ghost normal-case text-xl">SupaNuxt SAAS</NuxtLink>
<NuxtLink to="/" class="btn btn-ghost normal-case text-xl">
SupaNuxt SAAS
</NuxtLink>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
@@ -24,9 +39,15 @@
<li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signup">Start for free</NuxtLink></li>
<li v-if="!user"><a title="github" href="https://github.com/JavascriptMick/supanuxt-saas"><Icon name="mdi:github"/></a></li>
<li v-if="!user">
<a
title="github"
href="https://github.com/JavascriptMick/supanuxt-saas">
<Icon name="mdi:github" />
</a>
</li>
</ul>
</div>
<UserAccount v-if="user" :user="user"/>
<UserAccount v-if="user" :user="user" />
</div>
</template>

22
components/Modal.vue
View File

@@ -21,18 +21,18 @@
// props for which buttons to show
interface Props {
showOk?: boolean
showCancel?: boolean
showOk?: boolean;
showCancel?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
showOk: true,
showCancel: false,
})
showCancel: false
});
// open event (exposed to parent)
const open = () => {
modalIsVisible.value = true;
}
};
defineExpose({ open });
// close events emitted on modal close
@@ -40,16 +40,20 @@
const closeOk = () => {
emit('closeOk');
modalIsVisible.value = false;
}
};
const closeCancel = () => {
emit('closeCancel');
modalIsVisible.value = false;
}
};
</script>
<template>
<!-- the input controls the visibility of the modal (css shenanigans) the v-model allows me to control it in turn from the wrapper component -->
<input type="checkbox" id="my-modal" class="modal-toggle" v-model="modalIsVisible" />
<input
type="checkbox"
id="my-modal"
class="modal-toggle"
v-model="modalIsVisible" />
<div class="modal">
<div class="modal-box">
<slot />
@@ -64,4 +68,4 @@
</div>
</div>
</div>
</template>
</template>

36
components/Notifications.client.vue
View File

@@ -1,4 +1,3 @@
<script setup lang="ts">
import { NotificationType } from '#imports';
import { storeToRefs } from 'pinia';
@@ -9,31 +8,42 @@
const classNameForType = (type: NotificationType) => {
switch (type) {
case NotificationType.Info:
return "alert alert-info";
return 'alert alert-info';
case NotificationType.Success:
return "alert alert-success";
return 'alert alert-success';
case NotificationType.Warning:
return "alert alert-warning";
return 'alert alert-warning';
case NotificationType.Error:
return "alert alert-error";
return 'alert alert-error';
}
};
</script>
<template>
<div class="toast toast-end toast-top">
<div v-for="notification in notifications" :class="classNameForType(notification.type)" >
<div
v-for="notification in notifications"
:class="classNameForType(notification.type)">
<div>
<button
<button
@click.prevent="notifyStore.removeNotification(notification)"
type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
aria-label="Close">
<span class="sr-only">Close</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<span>&nbsp;{{notification.message}}</span>
<span>&nbsp;{{ notification.message }}</span>
</div>
</div>
</div>
</template>
</template>

24
components/UserAccount/UserAccount.vue
View File

@@ -2,8 +2,8 @@
const props = defineProps({
user: {
type: Object,
required: true,
},
required: true
}
});
const { user } = props;
</script>
@@ -13,16 +13,24 @@
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<img v-if="user.user_metadata?.avatar_url" :src="user.user_metadata.avatar_url" alt="avatar image"/>
<img v-else src="~/assets/images/avatar.svg" alt="default avatar image"/>
<img
v-if="user.user_metadata?.avatar_url"
:src="user.user_metadata.avatar_url"
alt="avatar image" />
<img
v-else
src="~/assets/images/avatar.svg"
alt="default avatar image" />
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
<ul
tabindex="0"
class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
<li v-if="user">{{ user.email }}</li>
<li><NuxtLink to="/account">Account</NuxtLink></li>
<li><UserAccountSignout/></li>
<UserAccountSwitch/>
<li><UserAccountSignout /></li>
<UserAccountSwitch />
</ul>
</div>
</div>
</template>
</template>

9
components/UserAccount/UserAccountSignout.client.vue
View File

@@ -1,20 +1,19 @@
<script setup lang="ts">
const supabase = useSupabaseAuthClient();
const accountStore = useAccountStore();
onMounted(async () => {
await accountStore.init()
await accountStore.init();
});
async function signout() {
await supabase.auth.signOut();
if(accountStore){
if (accountStore) {
accountStore.signout();
}
navigateTo('/', {replace: true});
navigateTo('/', { replace: true });
}
</script>
<template>
<a href="#" @click.prevent="signout()">Signout</a>
</template>
</template>

18
components/UserAccount/UserAccountSwitch.client.vue
View File

@@ -1,21 +1,27 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
const accountStore = useAccountStore()
const accountStore = useAccountStore();
const { dbUser, activeAccountId } = storeToRefs(accountStore);
onMounted(async () => {
await accountStore.init()
await accountStore.init();
});
</script>
<template>
<template v-if="dbUser?.memberships && dbUser?.memberships.length > 1">
<li>Switch Account</li>
<li v-for="membership in dbUser?.memberships">
<a v-if="membership.account_id !== activeAccountId && !membership.pending" href="#" @click="accountStore.changeActiveAccount(membership.account_id)">{{ membership.account.name }}</a>
<span v-if="membership.pending">{{ membership.account.name }} (pending)</span>
<a
v-if="membership.account_id !== activeAccountId && !membership.pending"
href="#"
@click="accountStore.changeActiveAccount(membership.account_id)">
{{ membership.account.name }}
</a>
<span v-if="membership.pending">
{{ membership.account.name }} (pending)
</span>
</li>
</template>
</template>
</template>

2
components/modal.type.ts
View File

@@ -1,4 +1,4 @@
import { Modal } from '#components';
// seems pretty stoopid that I need to do this in a seperate file but it seems to work
export type ModalType = typeof Modal extends new () => infer T ? T : never;
export type ModalType = typeof Modal extends new () => infer T ? T : never;