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>