add delete playlist modal

src/components/PlaylistView/Header.vue

@@ -29,7 +29,7 @@
         >Last updated {{ info.last_updated }} &#160;|&#160;&#160;</span
       >
       <span class="edit" @click="editPlaylist">Edit&#160;&#160;|</span>
-      <DeleteSvg class="edit"/>
+      <DeleteSvg class="edit" @click="deletePlaylist" />
     </div>
   </div>
 </template>
@@ -63,6 +63,10 @@ useVisibility(playlistheader, nav.toggleShowPlay);
 function editPlaylist() {
   modal.showEditPlaylistModal(info.value);
 }
+
+function deletePlaylist() {
+  modal.showDeletePlaylistModal(parseInt(playlist.info.id));
+}
 </script>
 
 <style lang="scss">
@@ -79,10 +83,6 @@ function editPlaylist() {
     left: 0;
     width: 100%;
     height: 100%;
-    // background-image: linear-gradient(
-    //   rgba(0, 0, 0, 0.514),
-    //   rgba(0, 0, 0, 0.651)
-    // );
     background-color: $black;
     opacity: 0.5;
   }
@@ -103,8 +103,8 @@ function editPlaylist() {
     align-items: center;
 
     svg {
-      transform: scale(.75);
-    margin-bottom: -0.2rem;
+      transform: scale(0.75);
+      margin-bottom: -0.2rem;
     }
 
     .edit {
@@ -122,19 +122,6 @@ function editPlaylist() {
     display: grid;
     z-index: 10;
 
-    .art {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: flex-end;
-
-      .image {
-        width: 12rem;
-        height: 12rem;
-        background-image: url("../../assets/images/eggs.jpg");
-      }
-    }
-
     .info {
       display: flex;
       flex-direction: column-reverse;
@@ -149,7 +136,6 @@ function editPlaylist() {
     .title {
       font-size: 4rem;
       font-weight: 1000;
-      text-transform: capitalize;
       cursor: text;
     }
 

src/components/modal.vue

@@ -17,6 +17,13 @@
         @setTitle="setTitle"
       />
       <WelcomeModal v-if="modal.component == modal.options.welcome" />
+      <div v-if="modal.component == modal.options.deletePlaylist">
+        <ConfirmModal
+          :text="'Are you sure you want to permanently delete this playlist?'"
+          :cancelAction="modal.hideModal"
+          :confirmAction="deletePlaylist"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -27,9 +34,12 @@ import useModalStore from "../stores/modal";
 import NewPlaylist from "./modals/NewPlaylist.vue";
 import UpdatePlaylist from "./modals/updatePlaylist.vue";
 import WelcomeModal from "./WelcomeModal.vue";
+import ConfirmModal from "./modals/ConfirmModal.vue";
+import { deletePlaylist as delPlaylist } from "@/composables/fetch/playlists";
+import { useRouter } from "vue-router";
 
 const modal = useModalStore();
-
+const router = useRouter();
 /**
  * Sets the modal title
  * @param title
@@ -44,6 +54,12 @@ function setTitle(title: string) {
 function hideModal() {
   modal.hideModal();
 }
+
+function deletePlaylist() {
+  delPlaylist(modal.props.pid)
+    .then(() => modal.hideModal())
+    .then(() => router.back());
+}
 </script>
 
 <style lang="scss">

src/components/modals/ConfirmModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="confirm-modal">
+    <div class="t-center" style="padding: 0 4rem">{{ text }}</div>
+    <div class="buttons">
+      <button class="cancel" @click="cancelAction">Cancel</button>
+      <button class="confirm" @click="confirmAction">Delete</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string;
+  confirmAction: () => void;
+  cancelAction: () => void;
+}>();
+</script>
+
+<style lang="scss">
+.confirm-modal {
+  .buttons {
+    margin-top: 2rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .confirm {
+    background: $red;
+  }
+}
+</style>

src/composables/fetch/playlists.ts

@@ -79,7 +79,10 @@ async function addTrackToPlaylist(playlist: Playlist, track: Track) {
     return;
   }
 
-  new Notification(track.title + " added to " + playlist.name, NotifType.Success);
+  new Notification(
+    track.title + " added to " + playlist.name,
+    NotifType.Success
+  );
 }
 
 async function getPlaylist(pid: string) {
@@ -153,6 +156,20 @@ export async function getPlaylistArtists(pid: string): Promise<Artist[]> {
   return [];
 }
 
+export async function deletePlaylist(pid: string) {
+  console.log(pid);
+  const { status } = await useAxios({
+    url: paths.api.playlist.base + "/delete",
+    props: {
+      pid,
+    },
+  });
+
+  if (status == 200) {
+    new Notification("Playlist deleted", NotifType.Success);
+  }
+}
+
 export {
   createNewPlaylist,
   getAllPlaylists,

src/stores/modal.ts

@@ -5,6 +5,7 @@ enum ModalOptions {
   newPlaylist,
   updatePlaylist,
   welcome,
+  deletePlaylist,
 }
 
 export default defineStore("newModal", {
@@ -33,8 +34,15 @@ export default defineStore("newModal", {
     showWelcomeModal() {
       this.showModal(ModalOptions.welcome);
     },
+    showDeletePlaylistModal(pid: number) {
+      this.props = {
+        pid: pid,
+      };
+      this.showModal(ModalOptions.deletePlaylist);
+    },
     hideModal() {
       this.visible = false;
+      this.setTitle("");
     },
     setTitle(new_title: string) {
       this.title = new_title;