Added delete stash icons and dialog.

assets/components/container/container.vue

@@ -44,7 +44,7 @@
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
-import Filters from './filters.vue';
+import Filters from '../filters/filters.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;

assets/components/dialog/dialog.vue

@@ -76,7 +76,6 @@ export default {
 	color: var(--text-light);
 	font-size: 1.5rem;
 	font-weight: bold;
-	text-transform: capitalize;
 }
 
 .header-title {
@@ -106,7 +105,11 @@ export default {
 
 ::v-deep(.dialog-actions) {
 	display: flex;
-	padding: .5rem 0;
+	padding: 1rem 0 0 0;
+
+	&.center {
+		justify-content: center;
+	}
 
 	&.right {
 		justify-content: flex-end;

assets/components/filters/filters.vue

@@ -1,6 +1,6 @@
 <template>
 	<Dialog
-		title="filters"
+		title="Filters"
 		@close="$emit('close')"
 	>
 		<div class="filters">

assets/components/stashes/remove-stash.vue

@@ -0,0 +1,38 @@
+<template>
+	<Dialog
+		title="Remove stash"
+		@close="$emit('close', false)"
+	>
+		<form @submit.prevent="removeStash">
+			Are you sure you want to remove stash "{{ stash.name }}"?
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Remove</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function removeStash() {
+	await this.$store.dispatch('removeStash', this.stash.id);
+
+	this.$emit('close', true);
+}
+
+export default {
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	methods: {
+		removeStash,
+	},
+};
+</script>

assets/components/stashes/stash.vue

@@ -7,6 +7,12 @@
 			<h2 class="stash-name">{{ stash.name }}</h2>
 
 			<span class="header-section">
+				<router-link
+					v-if="stash.user"
+					:to="{ name: 'user', params: { username: stash.user.username } }"
+					class="header-item stash-username nolink"
+				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+
 				<label
 					v-if="isMine"
 					v-tooltip="'Public'"
@@ -30,11 +36,18 @@
 					/>
 				</label>
 
-				<router-link
+				<Icon
-					v-if="stash.user"
+					v-if="stash.deletable"
-					:to="{ name: 'user', params: { username: stash.user.username } }"
+					icon="bin"
-					class="header-item stash-username nolink"
+					class="stash-remove"
-				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+					@click.native="showRemoveStash = true"
+				/>
+
+				<RemoveStash
+					v-if="showRemoveStash"
+					:stash="stash"
+					@close="removeStash"
+				/>
 			</span>
 		</div>
 
@@ -62,6 +75,7 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import RemoveStash from './remove-stash.vue';
 import Toggle from '../form/toggle.vue';
 
 async function fetchStash() {
@@ -78,6 +92,19 @@ async function publishStash(isPublic) {
 	this.fetchStash();
 }
 
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed && this.stash.user) {
+		this.$router.replace({ name: 'user', params: { username: this.stash.user.username } });
+		return;
+	}
+
+	if (removed) {
+		this.$router.replace({ name: 'home' });
+	}
+}
+
 async function mounted() {
 	this.fetchStash();
 }
@@ -86,11 +113,13 @@ export default {
 	components: {
 		Actor,
 		Releases,
+		RemoveStash,
 		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			showRemoveStash: false,
 			isMine: false,
 		};
 	},
@@ -98,6 +127,7 @@ export default {
 	methods: {
 		fetchStash,
 		publishStash,
+		removeStash,
 	},
 };
 </script>
@@ -136,6 +166,17 @@ export default {
 	}
 }
 
+.stash-remove.icon {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten-strong);
+
+	&:hover {
+		fill: var(--text-light);
+		cursor: pointer;
+	}
+}
+
 .stash-name,
 .stash-username {
 	display: inline-flex;

assets/components/users/stash.vue

@@ -8,27 +8,42 @@
 				<h4 class="stash-name">{{ stash.name }}</h4>
 			</router-link>
 
-			<label
+			<span class="header-actions noselect">
-				v-if="isMe"
+				<label
-				v-tooltip="'Public'"
+					v-if="isMe"
-				:class="{ public: stash.public }"
+					v-tooltip="'Public'"
-				class="stash-public"
+					:class="{ public: stash.public }"
-			>
+					class="stash-public"
-				<Icon
+				>
-					v-show="stash.public"
+					<Icon
-					icon="eye"
+						v-show="stash.public"
-				/>
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						@change="checked => publishStash(checked)"
+					/>
+				</label>
 
 				<Icon
-					v-show="!stash.public"
+					v-if="stash.deletable"
-					icon="eye-blocked"
+					icon="bin"
+					class="stash-remove"
+					@click.native="showRemoveStash = true"
 				/>
 
-				<Toggle
+				<RemoveStash
-					:checked="stash.public"
+					v-if="showRemoveStash"
-					@change="checked => publishStash(stash, checked)"
+					:stash="stash"
+					@close="removeStash"
 				/>
-			</label>
+			</span>
 		</div>
 
 		<ul
@@ -68,21 +83,31 @@
 <script>
 import ActorPreview from './actor-preview.vue';
 import ScenePreview from './scene-preview.vue';
+import RemoveStash from '../stashes/remove-stash.vue';
 import Toggle from '../form/toggle.vue';
 
-async function publishStash(stash, isPublic) {
+async function publishStash(isPublic) {
 	await this.$store.dispatch('updateStash', {
-		stashId: stash.id,
+		stashId: this.stash.id,
 		stash: { public: isPublic },
 	});
 
 	this.$emit('publish', isPublic);
 }
 
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed) {
+		this.$emit('remove');
+	}
+}
+
 export default {
 	components: {
 		ActorPreview,
 		ScenePreview,
+		RemoveStash,
 		Toggle,
 	},
 	props: {
@@ -95,9 +120,15 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['publish'],
+	emits: ['publish', 'remove'],
+	data() {
+		return {
+			showRemoveStash: false,
+		};
+	},
 	methods: {
 		publishStash,
+		removeStash,
 	},
 };
 </script>
@@ -142,8 +173,13 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.stash-public {
+.header-actions {
 	display: flex;
+	align-items: stretch;
+}
+
+.stash-public {
+	display: inline-flex;
 	align-items: center;
 	padding: .5rem;
 	cursor: pointer;
@@ -154,6 +190,17 @@ export default {
 	}
 }
 
+.stash-remove {
+	height: auto;
+	padding: 0 1rem 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong);
+	}
+}
+
 .stash-actors,
 .stash-scenes {
 	display: flex;

assets/components/users/user.vue

@@ -23,6 +23,7 @@
 						:stash="stash"
 						:is-me="isMe"
 						@publish="() => fetchUser()"
+						@remove="() => fetchUser()"
 					/>
 				</li>
 
@@ -131,20 +132,20 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: var(--shadow-hint);
+	background: var(--shadow-touch);
 
 	.icon {
 		width: 1.5rem;
 		height: 1.5rem;
-		fill: var(--shadow-weak);
+		fill: var(--shadow-hint);
 	}
 
 	&:hover {
-		background: var(--shadow-weak);
+		background: var(--shadow-hint);
 		cursor: pointer;
 
 		.icon {
-			fill: var(--shadow);
+			fill: var(--shadow-weak);
 		}
 	}
 }

assets/js/stashes/actions.js

@@ -21,6 +21,7 @@ function initStashesActions(store, _router) {
 					name
 					slug
 					public
+					deletable
 					user {
 						id
 						username
@@ -79,6 +80,10 @@ function initStashesActions(store, _router) {
 		return newStash;
 	}
 
+	async function removeStash(context, stashId) {
+		await del(`/stashes/${stashId}`);
+	}
+
 	async function stashActor(context, { actorId, stashId }) {
 		await post(`/stashes/${stashId}/actors`, { actorId });
 	}
@@ -106,6 +111,7 @@ function initStashesActions(store, _router) {
 	return {
 		createStash,
 		fetchStash,
+		removeStash,
 		stashActor,
 		stashScene,
 		stashMovie,

assets/js/users/actions.js

@@ -19,6 +19,7 @@ function initUsersActions(store, _router) {
 						name
 						slug
 						public
+						deletable
 						actors: stashesActors {
 							comment
 							actor {

migrations/20190325001339_releases.js

@@ -1067,6 +1067,10 @@ exports.up = knex => Promise.resolve()
 			.notNullable()
 			.defaultTo(false);
 
+		table.boolean('deletable')
+			.notNullable()
+			.defaultTo(true);
+
 		table.datetime('created_at')
 			.notNullable()
 			.defaultTo(knex.fn.now());

src/auth.js

@@ -80,6 +80,7 @@ async function signup(credentials) {
 		name: 'Favorites',
 		slug: 'favorites',
 		public: false,
+		deletable: false,
 	});
 
 	return fetchUser(userId);

src/stashes.js

@@ -80,6 +80,24 @@ async function updateStash(stashId, newStash, sessionUser) {
 	return curateStash(stash);
 }
 
+async function removeStash(stashId, sessionUser) {
+	if (!sessionUser) {
+		throw new HttpError('You are not authenthicated', 401);
+	}
+
+	const removed = await knex('stashes')
+		.where({
+			id: stashId,
+			user_id: sessionUser.id,
+			deletable: true,
+		})
+		.delete();
+
+	if (removed === 0) {
+		throw new HttpError('Unable to remove this stash', 400);
+	}
+}
+
 async function stashActor(actorId, stashId, sessionUser) {
 	const stash = await fetchStash(stashId, sessionUser);
 
@@ -149,6 +167,7 @@ async function unstashMovie(movieId, stashId, sessionUser) {
 module.exports = {
 	createStash,
 	curateStash,
+	removeStash,
 	stashActor,
 	stashScene,
 	stashMovie,

src/web/server.js

@@ -45,6 +45,7 @@ const {
 
 const {
 	createStash,
+	removeStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -87,6 +88,7 @@ async function initServer() {
 
 	router.post('/api/stashes', createStash);
 	router.patch('/api/stashes/:stashId', updateStash);
+	router.delete('/api/stashes/:stashId', removeStash);
 
 	router.post('/api/stashes/:stashId/actors', stashActor);
 	router.post('/api/stashes/:stashId/scenes', stashScene);

src/web/stashes.js

@@ -2,6 +2,7 @@
 
 const {
 	createStash,
+	removeStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -23,6 +24,12 @@ async function updateStashApi(req, res) {
 	res.send(stash);
 }
 
+async function removeStashApi(req, res) {
+	await removeStash(req.params.stashId, req.session.user);
+
+	res.status(204).send();
+}
+
 async function stashActorApi(req, res) {
 	await stashActor(req.body.actorId, req.params.stashId, req.session.user);
 
@@ -61,6 +68,7 @@ async function unstashMovieApi(req, res) {
 
 module.exports = {
 	createStash: createStashApi,
+	removeStash: removeStashApi,
 	stashActor: stashActorApi,
 	stashScene: stashSceneApi,
 	stashMovie: stashMovieApi,