From 9c0d7e27a3c9bb755f8338c7164555b86508b4e6 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 14 Aug 2020 00:23:12 -0600
Subject: [PATCH] Add interface elements of the playlist export modal

---
 src/components/modals/PlaylistExport.vue | 58 ++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/components/modals/PlaylistExport.vue b/src/components/modals/PlaylistExport.vue
index 232db7b..ec4d367 100644
--- a/src/components/modals/PlaylistExport.vue
+++ b/src/components/modals/PlaylistExport.vue
@@ -8,6 +8,30 @@
 			<transition name="burst" @after-leave="$emit('close')">
 				<div v-if="content" class="modal">
 					<h2 class="center">Export Playlist</h2>
+					<div class="modal-form">
+						<div class="input-row">
+							<input
+								type="text"
+								name="Playlist Name"
+								id="playlist-name"
+								v-model="name"
+							>
+						</div>
+						<div class="input-row">
+							<textarea-autosize
+								v-model="description"
+								placeholder="Type something here..."
+								:min-height="100"
+							/>
+						</div>
+						<div class="input-row">
+							<select v-model="is_private">
+								<option value="true">Private Playlist</option>
+								<option value="false">Public Playlist</option>
+							</select>
+							<button>Create Playlist</button>
+						</div>
+					</div>
 				</div>
 			</transition>
 		</div>
@@ -17,11 +41,25 @@
 <script>
 export default {
 	name: `PlaylistExportModal`,
+	props: {
+		config: {
+			type: Object,
+			required: true,
+		}
+	},
 	data() {return {
 		container: false,
 		content: false,
+		name: ``,
+		is_private: true,
+		description: `Playlist auto-generated by Top Lists for Spotify`,
 	}},
 	mounted() {
+		let date = new Date();
+		let month = date.getMonth() + 1;
+		month = month < 10 ? `0${month}` : month;
+		this.name = `Top ${this.config.limit || 10} Tracks - ${date.getFullYear()}/${month}/${date.getDate()}`;
+
 		this.$nextTick(function() {
 			this.container = true;
 		});
@@ -47,13 +85,33 @@ export default {
 .modal {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
+	color: var(--modal-text);
 	text-align: center;
+	overflow-y: auto;
 	max-height: 85%;
 	padding: 0 15px;
 	z-index: 11;
 	width: 90%;
 }
 
+div.modal-form {
+	flex-direction: column;
+	align-items: center;
+	display: flex;
+}
+
+.input-row {
+	justify-content: space-evenly;
+	margin-bottom: 10px;
+	flex-wrap: wrap;
+	display: flex;
+	width: 100%;
+}
+
+button {
+	margin: 10px;
+}
+
 @media only screen and (min-width: 768px) {
 	.modal {
 		width: 50%;