mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-25 15:59:38 +02:00
UI changes and updates, collection page refresh
This commit is contained in:
Sean Morley
parent
c9dd5fe33d
commit
f7c998ab58
20 changed files with 834 additions and 834 deletions
182
frontend/src/lib/components/CollectionModal.svelte
Normal file
182
frontend/src/lib/components/CollectionModal.svelte
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Collection, Transportation } from '$lib/types';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
let modal: HTMLDialogElement;
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
import MarkdownEditor from './MarkdownEditor.svelte';
|
||||
|
||||
export let collectionToEdit: Collection | null = null;
|
||||
|
||||
let collection: Collection = {
|
||||
id: collectionToEdit?.id || '',
|
||||
name: collectionToEdit?.name || '',
|
||||
description: collectionToEdit?.description || '',
|
||||
start_date: collectionToEdit?.start_date || null,
|
||||
end_date: collectionToEdit?.end_date || null,
|
||||
user_id: collectionToEdit?.user_id || '',
|
||||
is_public: collectionToEdit?.is_public || false,
|
||||
adventures: collectionToEdit?.adventures || [],
|
||||
link: collectionToEdit?.link || '',
|
||||
shared_with: collectionToEdit?.shared_with || []
|
||||
};
|
||||
|
||||
console.log(collection);
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log(collection);
|
||||
|
||||
if (collection.id === '') {
|
||||
let res = await fetch('/api/collections', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(collection)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
collection = data as Collection;
|
||||
addToast('success', $t('collection.collection_created'));
|
||||
dispatch('save', collection);
|
||||
} else {
|
||||
console.error(data);
|
||||
addToast('error', $t('collection.error_creating_collection'));
|
||||
}
|
||||
} else {
|
||||
let res = await fetch(`/api/collections/${collection.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(collection)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
collection = data as Collection;
|
||||
addToast('success', $t('collection.collection_edit_success'));
|
||||
dispatch('save', collection);
|
||||
} else {
|
||||
addToast('error', $t('collection.error_editing_collection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-2xl">
|
||||
{collectionToEdit ? $t('adventures.edit_collection') : $t('collection.new_collection')}
|
||||
</h3>
|
||||
<div class="modal-action items-center">
|
||||
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
||||
<!-- Basic Information Section -->
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
{$t('adventures.basic_information')}
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="name">
|
||||
{$t('adventures.name')}<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={collection.name}
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label for="description">{$t('adventures.description')}</label><br />
|
||||
<MarkdownEditor bind:text={collection.description} editor_height={'h-32'} />
|
||||
</div>
|
||||
<!-- Start Date -->
|
||||
<div>
|
||||
<label for="start_date">{$t('adventures.start_date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={collection.start_date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Date -->
|
||||
<div>
|
||||
<label for="end_date">{$t('adventures.end_date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={collection.end_date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- Public -->
|
||||
<div>
|
||||
<label class="label cursor-pointer flex items-start space-x-2">
|
||||
<span class="label-text">{$t('collection.public_collection')}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
name="is_public"
|
||||
bind:checked={collection.is_public}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Link -->
|
||||
<div>
|
||||
<label for="link">{$t('adventures.link')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={collection.link}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Actions -->
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{$t('adventures.save_next')}
|
||||
</button>
|
||||
<button type="button" class="btn" on:click={close}>
|
||||
{$t('about.close')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let collectionToEdit: Collection;
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Collection } from '$lib/types';
|
||||
import { t } from 'svelte-i18n';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
console.log(collectionToEdit.id);
|
||||
|
||||
let originalName = collectionToEdit.name;
|
||||
|
||||
import Calendar from '~icons/mdi/calendar';
|
||||
import Notebook from '~icons/mdi/notebook';
|
||||
import Earth from '~icons/mdi/earth';
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function submit() {}
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
if (collectionToEdit.end_date && collectionToEdit.start_date) {
|
||||
if (new Date(collectionToEdit.start_date) > new Date(collectionToEdit.end_date)) {
|
||||
addToast('error', $t('adventures.start_before_end_error'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (collectionToEdit.end_date && !collectionToEdit.start_date) {
|
||||
addToast('error', $t('adventures.no_start_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (collectionToEdit.start_date && !collectionToEdit.end_date) {
|
||||
addToast('error', $t('adventures.no_end_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const data = JSON.parse(result.data);
|
||||
console.log(data);
|
||||
|
||||
if (data) {
|
||||
addToast('success', $t('collection.collection_edit_success'));
|
||||
dispatch('saveEdit', collectionToEdit);
|
||||
close();
|
||||
} else {
|
||||
addToast('warning', $t('collection.error_editing_collection'));
|
||||
console.log('Error editing collection');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">{$t('adventures.edit_collection')}: {originalName}</h3>
|
||||
<div
|
||||
class="modal-action items-center"
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
||||
>
|
||||
<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/collections?/edit">
|
||||
<div class="mb-2">
|
||||
<input
|
||||
type="text"
|
||||
id="adventureId"
|
||||
name="adventureId"
|
||||
hidden
|
||||
readonly
|
||||
bind:value={collectionToEdit.id}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<label for="name">{$t('adventures.name')}</label><br />
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
bind:value={collectionToEdit.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="date"
|
||||
>{$t('adventures.description')}
|
||||
<Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<div class="flex">
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={collectionToEdit.description}
|
||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
||||
/>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-neutral ml-2"
|
||||
type="button"
|
||||
on:click={generate}
|
||||
><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
|
||||
></iconify-icon>Generate Description</button
|
||||
> -->
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="start_date"
|
||||
>{$t('adventures.start_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={collectionToEdit.start_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date"
|
||||
>{$t('adventures.end_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={collectionToEdit.end_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date">{$t('adventures.link')} </label><br />
|
||||
<input
|
||||
type="url"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={collectionToEdit.link}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="is_public"
|
||||
>{$t('adventures.public')} <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
name="is_public"
|
||||
bind:checked={collectionToEdit.is_public}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if collectionToEdit.is_public}
|
||||
<div class="bg-neutral p-4 rounded-md shadow-sm">
|
||||
<p class=" font-semibold">{$t('adventures.share_adventure')}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-card-foreground font-mono">
|
||||
{window.location.origin}/collections/{collectionToEdit.id}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/collections/${collectionToEdit.id}`
|
||||
);
|
||||
}}
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
|
||||
>
|
||||
{$t('adventures.copy_link')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</button>
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
||||
</form>
|
||||
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { addToast } from '$lib/toasts';
|
||||
|
||||
import Calendar from '~icons/mdi/calendar';
|
||||
|
||||
let newCollection: Collection = {
|
||||
user_id: '',
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
adventures: [] as Adventure[],
|
||||
is_public: false,
|
||||
shared_with: [],
|
||||
link: ''
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
// make sure that start_date is before end_date
|
||||
if (new Date(newCollection.start_date ?? '') > new Date(newCollection.end_date ?? '')) {
|
||||
addToast('error', $t('adventures.start_before_end_error'));
|
||||
return;
|
||||
}
|
||||
|
||||
// make sure end date has a start date
|
||||
if (newCollection.end_date && !newCollection.start_date) {
|
||||
addToast('error', $t('adventures.no_start_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (newCollection.start_date && !newCollection.end_date) {
|
||||
addToast('error', $t('adventures.no_end_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const data = JSON.parse(result.data); // Parsing the JSON string in the data field
|
||||
|
||||
if (data[1] !== undefined) {
|
||||
// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
|
||||
console.log(data);
|
||||
let id = data[1];
|
||||
let user_id = data[2];
|
||||
|
||||
if (id !== undefined && user_id !== undefined) {
|
||||
newCollection.id = id;
|
||||
newCollection.user_id = user_id;
|
||||
console.log(newCollection);
|
||||
dispatch('create', newCollection);
|
||||
addToast('success', $t('collection.collection_created'));
|
||||
close();
|
||||
} else {
|
||||
addToast('error', $t('collection.error_creating_collection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">{$t('collection.new_collection')}</h3>
|
||||
<div
|
||||
class="modal-action items-center"
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
||||
>
|
||||
<form
|
||||
method="post"
|
||||
style="width: 100%;"
|
||||
on:submit={handleSubmit}
|
||||
action="/collections?/create"
|
||||
>
|
||||
<div class="mb-2">
|
||||
<label for="name">{$t('adventures.name')}</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={newCollection.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="description"
|
||||
>{$t('adventures.description')}<iconify-icon
|
||||
icon="mdi:notebook"
|
||||
class="text-lg ml-1 -mb-0.5"
|
||||
></iconify-icon></label
|
||||
><br />
|
||||
<div class="flex">
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={newCollection.description}
|
||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="start_date"
|
||||
>{$t('adventures.start_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={newCollection.start_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date"
|
||||
>{$t('adventures.end_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={newCollection.end_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date">{$t('adventures.link')} </label><br />
|
||||
<input
|
||||
type="url"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={newCollection.link}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<button type="submit" class="btn btn-primary mr-4 mt-4">
|
||||
{$t('collection.create')}
|
||||
</button>
|
||||
<button type="button" class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -73,22 +73,22 @@
|
|||
<p class="break-words">{transportation.from_location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.to_location}
|
||||
<!-- <ArrowDownThick class="w-4 h-4" /> -->
|
||||
{#if transportation.date}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-sm">{$t('adventures.to')}:</span>
|
||||
|
||||
<p class="break-words">{transportation.to_location}</p>
|
||||
<span class="font-medium text-sm">{$t('adventures.start')}:</span>
|
||||
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="space-y-2">
|
||||
{#if transportation.date}
|
||||
{#if transportation.to_location}
|
||||
<!-- <ArrowDownThick class="w-4 h-4" /> -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-sm">{$t('adventures.start')}:</span>
|
||||
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
||||
<span class="font-medium text-sm">{$t('adventures.to')}:</span>
|
||||
|
||||
<p class="break-words">{transportation.to_location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.end_date}
|
||||
|
|
|
|||
|
|
@ -17,34 +17,46 @@
|
|||
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<!-- Profile Picture and User Info -->
|
||||
<div class="flex flex-col items-center">
|
||||
{#if user.profile_pic}
|
||||
<div class="avatar">
|
||||
<div class="w-24 rounded-full">
|
||||
<div class="avatar mb-4">
|
||||
<div class="w-24 rounded-full ring ring-primary ring-offset-neutral ring-offset-2">
|
||||
<img src={user.profile_pic} alt={user.username} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="card-title overflow-ellipsis">{user.first_name} {user.last_name}</h2>
|
||||
|
||||
<h2 class="card-title text-center text-lg font-bold">
|
||||
{user.first_name}
|
||||
{user.last_name}
|
||||
</h2>
|
||||
<p class="text-sm text-center">{user.username}</p>
|
||||
|
||||
<!-- Admin Badge -->
|
||||
{#if user.is_staff}
|
||||
<div class="badge badge-primary mt-2">Admin</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-sm text-neutral-content">{user.username}</p>
|
||||
{#if user.is_staff}
|
||||
<div class="badge badge-primary">Admin</div>
|
||||
{/if}
|
||||
<!-- member since -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<Calendar class="w-4 h-4 mr-1" />
|
||||
<p class="text-sm text-neutral-content">
|
||||
|
||||
<!-- Member Since -->
|
||||
<div class="flex items-center justify-center mt-4 space-x-2 text-sm">
|
||||
<Calendar class="w-5 h-5 text-primary" />
|
||||
<p>
|
||||
{user.date_joined ? 'Joined ' + new Date(user.date_joined).toLocaleDateString() : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions justify-end">
|
||||
|
||||
<!-- Card Actions -->
|
||||
<div class="card-actions justify-center mt-6">
|
||||
{#if !sharing}
|
||||
<button class="btn btn-primary" on:click={() => goto(`/user/${user.uuid}`)}>View</button>
|
||||
<button class="btn btn-primary" on:click={() => goto(`/user/${user.uuid}`)}>
|
||||
View Profile
|
||||
</button>
|
||||
{:else if shared_with && !shared_with.includes(user.uuid)}
|
||||
<button class="btn btn-primary" on:click={() => dispatch('share', user)}>Share</button>
|
||||
<button class="btn btn-success" on:click={() => dispatch('share', user)}> Share </button>
|
||||
{:else}
|
||||
<button class="btn btn-primary" on:click={() => dispatch('unshare', user)}>Unshare</button>
|
||||
<button class="btn btn-error" on:click={() => dispatch('unshare', user)}> Unshare </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue