♿️ Move link via dropdown

client/components/Icon/folderOpen.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" :stroke="color">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
+  </svg>
+</template>
+
+<script>
+export default {
+	props: {
+		color: {
+			type: String,
+			default: 'currentColor'
+		}
+	}
+}
+</script>

client/components/Modal/ChangeCrate.vue

@@ -0,0 +1,131 @@
+<template>
+  <Modal class="add-modal" overflow="visible" @close="close">
+    <h1 class="headline">
+      Move this link to another crate
+    </h1>
+    <p>Select a crate to move the link:</p>
+    <div class="dropdown">
+      <v-select
+        v-model="selectedCrate"
+        :reduce="item => item.id"
+        :options="crates"
+        :get-option-label="(crate) => `${ emojiIcon(crate.icon) } ${ crate.name }`"
+        placeholder="Select a crate (optional)"
+        @open="isOpen = true"
+        @close="closeDropdown"
+      ></v-select>
+    </div>
+    <button v-if="selectedCrate !== currentCrate" v-shortkey="['enter']" class="primary-button" @click="save" @shortkey="save">
+      <Icon name="check" size="17px" />Save changes
+    </button>
+    <p v-if="invalidLinkErr" class="error">
+      Error: {{ invalidLinkErr }}
+    </p>
+  </Modal>
+</template>
+
+<script>
+import emojis from '@/../server/utils/emojis'
+
+export default {
+	data() {
+		return {
+			selectedCrate: undefined,
+			invalidLinkErr: undefined,
+			isOpen: false
+		}
+	},
+	computed: {
+		inputValue: {
+			set(value) {
+				this.$modal.setData({ inputValue: value })
+			},
+			get() {
+				return this.$store.state.modal.data.inputValue
+			}
+		},
+		linkId() {
+			return this.$store.state.modal.data.linkId
+		},
+		currentCrate() {
+			return this.$store.state.currentCrate
+		},
+		crates() {
+			return this.$store.state.crates
+		},
+		isLoading() {
+			return this.$nuxt.$loading.show
+		}
+	},
+	mounted() {
+		this.selectedCrate = !this.currentCrate || this.currentCrate === 'null' ? null : this.currentCrate
+	},
+	methods: {
+		emojiIcon(name) {
+			return emojis[name]
+		},
+		async save() {
+			if (!this.selectedCrate) {
+				return
+			}
+
+			const crate = this.selectedCrate
+			await this.$store.dispatch('MOVE_LINK', { linkId: this.linkId, crate: crate })
+
+			this.$switchToPageOrCrate(crate)
+
+			this.close()
+		},
+		closeDropdown() {
+			// Delay enable closing of modal so select doesn't trigger close when dropdown is outside of modal
+			setTimeout(() => {
+				this.isOpen = false
+			}, 500)
+		},
+		close() {
+			if (!this.isOpen) {
+				this.$modal.hide()
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.add-modal {
+		& h1 {
+			font-size: 1.2rem;
+			margin-bottom: 1rem;
+		}
+
+		& button {
+			display: flex;
+			align-items: center;
+
+			& div {
+				margin-right: 0.3rem;
+				margin-left: -3px;
+			}
+		}
+
+		& .error {
+			margin-top: 0.5rem;
+			color: var(--text-light);
+		}
+
+		.dropdown {
+			width: 200px;
+			margin-top: 0.5rem;
+			margin-bottom: 1rem;
+			font-size: 0.9rem;
+		}
+        .no-input {
+            width: 100%;
+        }
+        .headline {
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+	}
+</style>

client/components/Modal/LinkDetails.vue

@@ -143,6 +143,14 @@ export default {
 					show: true,
 					dropdown: true
 				},
+				{
+					id: 'changeCrate',
+					text: 'Move Link',
+					icon: 'folderOpen',
+					click: this.changeCrate,
+					show: this.editable,
+					dropdown: true
+				},
 				{
 					id: 'shareLink',
 					text: 'Share link',
@@ -252,6 +260,11 @@ export default {
 		}
 	},
 	methods: {
+		changeCrate() {
+			this.$modal.show('changeCrate', {
+				linkId: this.link.id
+			})
+		},
 		onResize() {
 			this.windowSize = window.innerWidth
 		},

client/components/Modal/Wrapper.vue

@@ -11,6 +11,7 @@
     <ModalBookmarklet v-if="showModal && showModal.bookmarklet" />
     <ModalChangelog v-if="showModal && showModal.changelog" />
     <ModalViewImage v-if="showModal && showModal.viewImage" />
+    <ModalChangeCrate v-if="showModal && showModal.changeCrate" />
 
     <ConfirmModal />
     <PromptModal />

client/pages/link/_.vue

@@ -200,6 +200,14 @@ export default {
 					show: true,
 					dropdown: true
 				},
+				{
+					id: 'changeCrate',
+					text: 'Move Link',
+					icon: 'folderOpen',
+					click: this.changeCrate,
+					show: this.editable,
+					dropdown: true
+				},
 				{
 					id: 'info',
 					text: 'What\'s WebCrate?',
@@ -279,6 +287,11 @@ export default {
 		openCrate() {
 			this.$switchToPageOrCrate(this.crateId, { external: this.isExternal, isPublic: this.isPublic })
 		},
+		changeCrate() {
+			this.$modal.show('changeCrate', {
+				linkId: this.link.id
+			})
+		},
 		async deleteLink() {
 			const confirm = await this.$confirm({
 				title: `Are you sure you want to delete this link?`,

client/store/modal.js

@@ -1,4 +1,4 @@
-const modals = [ 'search', 'addLink', 'addCrate', 'addExternalCrate', 'linkDetails', 'confirm', 'copyOutput', 'changeName', 'shareLink', 'bookmarklet', 'changelog', 'viewImage' ]
+const modals = [ 'search', 'addLink', 'addCrate', 'addExternalCrate', 'linkDetails', 'confirm', 'copyOutput', 'changeName', 'shareLink', 'bookmarklet', 'changelog', 'viewImage', 'changeCrate' ]
 
 export const state = () => ({
 	show: undefined,