Separated stash create dialog component.

This commit is contained in:
DebaucheryLibrarian 2024-08-04 23:40:25 +02:00
parent 164f91eabd
commit d370b35490
8 changed files with 110 additions and 66 deletions

View File

@ -0,0 +1,61 @@
<template>
<Dialog
title="New stash"
@close="emit('close')"
@open="stashNameInput?.focus()"
>
<form
class="dialog-body"
@submit.prevent="createStash"
>
<input
ref="stashNameInput"
v-model="stashName"
maxlength="24"
placeholder="Stash name"
class="input"
>
<button
class="button button-submit"
>Create stash</button>
</form>
</Dialog>
</template>
<script setup>
import { ref } from 'vue';
import { post } from '#/src/api.js';
import Dialog from '#/components/dialog/dialog.vue';
const emit = defineEmits(['created', 'close']);
const stashName = ref(null);
const stashNameInput = ref(null);
async function createStash() {
const newStash = await post('/stashes', {
name: stashName.value,
public: false,
}, {
successFeedback: `Created stash '${stashName.value}'`,
errorFeedback: `Failed to create stash '${stashName.value}'`,
appendErrorMessage: true,
});
emit('created', newStash);
stashName.value = null;
}
</script>
<style scoped>
.dialog-body {
padding: 1rem;
.input {
margin-bottom: .5rem;
}
}
</style>

View File

@ -21,6 +21,7 @@
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
@create="showStashDialog = true"
/>
</template>
</VDropdown>
@ -74,20 +75,27 @@
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
@create="showStashDialog = true"
/>
</template>
</VDropdown>
<StashDialog
v-if="showStashDialog"
@created="showStashDialog = false; reloadStashes();"
/>
</div>
</template>
<script setup>
import { ref, computed, inject } from 'vue';
import { post, del } from '#/src/api.js';
import { get, post, del } from '#/src/api.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue';
import StashMenu from '#/components/stashes/menu.vue';
import StashDialog from '#/components/stashes/create.vue';
const props = defineProps({
domain: {
@ -114,6 +122,7 @@ const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !
const done = ref(true);
const showStashes = ref(false);
const showStashDialog = ref(false);
const feedbackCutoff = 20;
const itemKeys = {
@ -182,6 +191,12 @@ function toggleShowStashes(state) {
showStashes.value = !showStashes.value;
}
async function reloadStashes() {
const profile = await get(`/users/${user.id}`);
console.log(profile);
}
</script>
<style scoped>

View File

@ -12,6 +12,16 @@
/>{{ userStash.name }}
</label>
</li>
<li class="menu-item create">
<label
class="menu-stash"
@click="emit('create')"
>
<Icon icon="plus3" />
New
</label>
</li>
</ul>
</template>
@ -29,22 +39,32 @@ defineProps({
},
});
const emit = defineEmits(['stash', 'unstash']);
const emit = defineEmits(['stash', 'unstash', 'create']);
</script>
<style scoped>
.menu-item {
display: block;
display: flex;
.icon {
fill: var(--shadow-weak-10);
padding: 0 .55rem 0 .2rem;
}
}
.menu-stash {
display: flex;
width: 100%;
align-items: center;
padding: .5rem;
&:hover {
cursor: pointer;
color: var(--primary);
.icon {
fill: var(--primary);
}
}
.check-container {

View File

@ -18,7 +18,7 @@
>
<img
v-else-if="entity.parent && !entity.independent"
v-else-if="entity.parent && !entity.isIndependent"
class="logo logo-child"
:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
>

View File

@ -432,6 +432,7 @@ function copySummary() {
.page {
display: flex;
justify-content: center;
flex-grow: 1;
background: var(--background-base-10);
}

View File

@ -29,29 +29,11 @@
</button>
</div>
<Dialog
<StashDialog
v-if="showStashDialog"
title="New stash"
@created="showStashDialog = false; reloadProfile();"
@close="showStashDialog = false"
@open="stashNameInput?.focus()"
>
<form
class="dialog-body"
@submit.prevent="createStash"
>
<input
ref="stashNameInput"
v-model="stashName"
maxlength="24"
placeholder="Stash name"
class="input"
>
<button
class="button button-submit"
>Create stash</button>
</form>
</Dialog>
/>
<ul class="stashes nolist">
<li
@ -233,10 +215,10 @@
import { ref, inject } from 'vue';
import { formatDistanceStrict } from 'date-fns';
import { get, post, del } from '#/src/api.js';
import { get, del } from '#/src/api.js';
import StashTile from '#/components/stashes/tile.vue';
import Dialog from '#/components/dialog/dialog.vue';
import StashDialog from '#/components/stashes/create.vue';
import AlertDialog from '#/components/alerts/create.vue';
const pageContext = inject('pageContext');
@ -244,9 +226,6 @@ const user = pageContext.user;
const profile = ref(pageContext.pageProps.profile);
const alerts = ref(pageContext.pageProps.alerts);
const stashName = ref(null);
const stashNameInput = ref(null);
const done = ref(true);
const showStashDialog = ref(false);
const showAlertDialog = ref(false);
@ -255,32 +234,6 @@ async function reloadProfile() {
profile.value = await get(`/users/${profile.value.id}`);
}
async function createStash() {
if (done.value === false) {
return;
}
done.value = false;
try {
await post('/stashes', {
name: stashName.value,
public: false,
}, {
successFeedback: `Created stash '${stashName.value}'`,
errorFeedback: `Failed to create stash '${stashName.value}'`,
appendErrorMessage: true,
});
} finally {
done.value = true;
}
showStashDialog.value = false;
stashName.value = null;
await reloadProfile();
}
async function reloadAlerts() {
alerts.value = await get('/alerts');
}
@ -488,14 +441,6 @@ async function removeAlert(alert) {
}
}
.dialog-body {
padding: 1rem;
.input {
margin-bottom: .5rem;
}
}
@media(--compact) {
.profile-header {
border-radius: 0;

View File

@ -146,7 +146,9 @@ export async function createStash(newStash, sessionUser) {
.insert(curateStashEntry(newStash, sessionUser))
.returning('*');
return curateStash(stash);
const curatedStash = curateStash(stash);
return curatedStash;
} catch (error) {
if (error.routine === '_bt_check_unique') {
throw new HttpError('Stash name should be unique', 409);

2
static

@ -1 +1 @@
Subproject commit 32b1ad8cfa8c6f3a0bcb42472f51b50273cd8866
Subproject commit 86446006a785c63e9c7a65431e9563f4a78e7ac5