modale artiste

components/ArtistModale.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="modale">
+    <form @submit.prevent="checkSubmit()">
+      <!-- FIELDS -->
+      <div class="modale-item">
+        <label for="name">Nom</label>
+        <input type="text" id="name" name="name" v-model="artist.name" />
+      </div>
+      <div class="modale-item">
+        <label for="avatar">Avatar</label>
+        <input type="text" id="avatar" name="avatar" v-model="artist.avatar" />
+      </div>
+      <!-- CLOSE & SAVE -->
+      <div class="modale-actions">
+        <button type="submit" class="modale-save">
+          <i class="fas fa-save"></i>
+        </button>
+        <button class="modale-close" @click.prevent="closeModale()">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ArtistModale",
+  props: ["artistInfo", "showModale"],
+  data() {
+    return {
+      artist: {},
+    };
+  },
+  methods: {
+    closeModale() {
+      this.$emit("closemodale");
+    },
+    checkSubmit() {
+      this.$emit("update", this.artist);
+    },
+  },
+  mounted() {
+    this.artist = { ...this.artistInfo };
+    console.log(this.artist);
+  },
+};
+</script>
+
+<style scoped>
+.modale {
+  background-color: rgba(0, 0, 0, 0.25);
+  position: fixed;
+  z-index: 1000;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modale > form {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  background-color: #c4c4c4;
+  border: 4px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 0 4px 4px #c4c4c4;
+}
+
+.modale-item > label {
+  color: black;
+}
+
+.modale-actions {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.modale-actions > button {
+  margin: 0;
+  margin-left: 4px;
+  padding: 8px 12px;
+}
+
+.modale-close {
+  background-color: #e04b4b;
+}
+
+.modale-close:hover {
+  box-shadow: 0px 4px 4px #e04b4b50;
+}
+
+.modale-save {
+  background-color: #4be064;
+}
+
+.modale-save:hover {
+  box-shadow: 0px 4px 4px #4be064;
+}
+</style>

pages/artist/_id.vue

@@ -8,8 +8,8 @@
             class="artist_avatar"
             :style="
               'background-image: url(' +
-                artist.avatar +
-                '), linear-gradient(#fefff8 50%, #140c3d) '
+              artist.avatar +
+              '), linear-gradient(#fefff8 50%, #140c3d) '
             "
           ></div>
           <div class="artist_info">
@@ -39,6 +39,10 @@
                 j'aime
                 <i class="far fa-heart"></i>
               </button>
+              <button @click="toggleModale()">
+                éditer
+                <i class="fas fa-pen"></i>
+              </button>
             </div>
           </div>
         </div>
@@ -55,40 +59,53 @@
         </div>
       </div>
     </div>
+    <ArtistModale
+      v-if="showModale"
+      :artistInfo="artist"
+      @closemodale="toggleModale()"
+      @update="updateInfo($event)"
+    />
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import BadgeComponent from "../../components/BadgeComponent.vue";
+import ArtistModale from "../../components/ArtistModale.vue";
 import AlbumsPreviewComponent from "../../components/AlbumsPreviewComponent.vue";
 import ConcertsComponent from "../../components/ConcertsComponent.vue";
 export default {
-  components: { BadgeComponent, AlbumsPreviewComponent, ConcertsComponent },
+  components: {
+    BadgeComponent,
+    AlbumsPreviewComponent,
+    ConcertsComponent,
+    ArtistModale,
+  },
   data() {
     return {
-      artist: {}
+      artist: {},
+      showModale: false,
     };
   },
   mounted() {
     axios
       .get(`http://localhost:3000/artists?id=${this.$nuxt.$route.params.id}`)
-      .then(response => response.data[0])
-      .then(respArtist => {
+      .then((response) => response.data[0])
+      .then((respArtist) => {
         //GENRES
         let reqGenres = axios
           .get(
             `http://localhost:3000/genres?id=${respArtist.genreId.join("&id=")}`
           )
-          .then(respGenre => respGenre.data.map(genre => genre.name))
-          .then(respGenreData => {
+          .then((respGenre) => respGenre.data.map((genre) => genre.name))
+          .then((respGenreData) => {
             respArtist.genres = respGenreData;
           });
         //CONCERTS
         let reqConcerts = axios
           .get(`http://localhost:3000/concerts?artistId=${respArtist.id}`)
-          .then(respConcert => {
-            respConcert.data.forEach(element => {
+          .then((respConcert) => {
+            respConcert.data.forEach((element) => {
               let date = element.dates.split("/");
               let formated = new Date(date[2], date[1] - 1, date[0]);
               element.dates = formated;
@@ -98,15 +115,23 @@ export default {
         //ALBUMS
         let reqAlbums = axios
           .get(`http://localhost:3000/albums?artistId=${respArtist.id}`)
-          .then(respAlbums => {
+          .then((respAlbums) => {
             respArtist.albums = respAlbums.data;
           });
 
-        Promise.all([reqGenres, reqConcerts, reqAlbums]).then(response => {
+        Promise.all([reqGenres, reqConcerts, reqAlbums]).then((response) => {
           this.artist = respArtist;
         });
       });
-  }
+  },
+  methods: {
+    toggleModale() {
+      this.showModale = !this.showModale;
+    },
+    updateInfo($event) {
+      console.log($event);
+    },
+  },
 };
 </script>
 

store/db.js

@@ -1,28 +1,35 @@
-import axios from 'axios'
+import axios from "axios";
 
 export const state = () => ({
-    news: null
-  })
-
-  export const getters = {
-    getNews: (state) => state.news
-
-  }
-  export const mutations = {
-    mutateNews(state, payload){state.news = payload.data}
+  news: null
+});
 
+export const getters = {
+  getNews: state => state.news
+};
+export const mutations = {
+  mutateNews(state, payload) {
+    state.news = payload.data;
   }
-  export const actions = {
-    fetchNews(context, payload){
-        console.log('MERDE')
-        axios
-        .get("http://localhost:3000/news")
-        .then(response => {
+};
+export const actions = {
+  // ARTISTS
+  updateArtist(context, payload) {
+    axios
+      .patch("http://localhost:3000/artists/2", payload)
+      .then(data => console.log("changed"))
+      .catch(err => console.log(err));
+  },
+  fetchNews(context, payload) {
+    console.log("MERDE");
+    axios
+      .get("http://localhost:3000/news")
+      .then(response => {
         console.log(response.data);
-        context.commit('mutateNews', {data: response.data})
-        })
-        .catch(error => {
+        context.commit("mutateNews", { data: response.data });
+      })
+      .catch(error => {
         console.error(error.response);
-        });
-    }
-  }
+      });
+  }
+};