Discussion :

[Histo]

Bonjour à tous, je me permet de solliciter votre aide afin de résoudre mon problème.

J'ai réalisais une fonction qui permet de supprimer un événement de mon calendrier. Dans cette fonction j'ai importais la mutation apollo.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
deleteEvent: function () {
      this.$apollo
        .mutate({
          mutation: MUTATION_entreePlanningDelete,
          variable: {
            id: this.id,
          },
        })
 
        .then((data) => {
          console.log(data);
        });
    },

je dois récupérer la valeur de l'id de mon événement pour la stocker dans la variable id de ma fonction.



voici le tableau ainsi que les objets qui le compose.

Je vous remerci d'avance.

[Séb.]

Apparemment ton tableau d'événements contient bien les ID.

Qu'est-ce qui te bloque exactement ?

[Histo]

Bonjour Séb désolé pour le retard je cherche à récupérer l'id qui est dans le tableau et de le stocker dans la variable id de ma fonction Delete.

merci pour votre aide.

cordialement.

[Séb.]

On n'a pas beaucoup d'infos, même pas un nom de variable

Dans le principe tu peux faire ce genre de chose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<x-calendar>
    <x-event v-for="calendarEvent in $data.calendarEvents">
        ...
        <button @click="deleteEvent(calendarEvent.id)">Supprimer</button>
    </x-event>
</x-calendar>

On envoie l'ID de l'événement à supprimer en paramètre de deleteEvent()

[Histo]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
deleteEvent: function () {
      this.$apollo
        .mutate({
          mutation: MUTATION_entreePlanningDelete,
          variable: {
            id:  ici doit être mis la valeur de l'id de mon tableau
          },
        })
 
        .then((data) => {
          console.log(data);
        });
    },

J'ai réalisais cette portion de code aussi pour afficher les différents événements dans mon calendier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    watch: {
    entreesPlanning: function () {
      if (this.entreesPlanning != {}) {
        const evenements = [];
        // On parcourt toutes les entrées planning
        this.entreesPlanning.map((entree) => {
          // On ajoute pour chaque entrée planning un objet dans le tableau évènement de la forme
          // { id: ID, name: String, start: Date, end: Date, color: String }
          evenements.push({
            id: entree.id,
            name: entree.label,
            start: entree.dateDebut,
            details: entree.description,
            end: entree.dateFin,
            color: this.colors[this.rnd(0, this.colors.length - 1)],
          });
        });
 
        // On update le tableau d'évènements
        this.events = evenements;
        console.log(evenements);
      }
    },
  },
    },

Se que j'essai de faire c'est de dire si tu clique sur l'événement récupère l'id de cette événement pour ainsi supprimer l'entrée en base de donnée. Appart faire un foreach je ne vois pas d'autre solution.

[Séb.]

Ça m'a pas l'air optimum de mettre ça dans le watch.

Et au niveau du template ça donne quoi ?

[Histo]

Voilà se que ça donne côté template

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
        <v-calendar
          ref="calendar"
          v-model="focus"
          color="primary"
          :events="events"
          :event-color="getEventColor"
          :type="type"
          @click:event="showEvent"
          @click:more="viewDay"
          @click:date="viewDay"
          @change="updateRange"
        >
        </v-calendar>

Voilà la partie data

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  data: function () {
    return {
      valid: true,
      entreesPlanning: {},
      renderComponent: true,
      today: new Date().toISOString().substr(0, 10),
      focus: new Date().toISOString().substr(0, 10),
      type: "month",
      typeToLabel: {
        month: "Mois",
        week: "Semaine",
        day: "Jour",
        "4Jour": "4 Jours",
      },
 
      name: null, // = label
      details: null, // = description
      start: null, // = date de début
      end: null, // = date de fin
 
      colors: ["blue", "indigo", "deep-purple", "cyan", "green", "orange"], // couleur des événements
      selectedEvent: {},
      selectedElement: null,
      selectedOpen: false,
      events: [],
      dialog: false,
      input: {
        id: "",
        dateDebut: "",
        dateFin: "",
        label: "",
        description: "",
      },
    };
  },

[Séb.]

On dirait que tu veux en montrer le moins possible

Il nous faut au moins la boucle et l'élément qui réagit à la demande de suppression de l'utilisateur (bouton ? lien ?)

[Histo]

Bonjour voici une vue plus global du template

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
   <v-sheet height="600" v-if="renderComponent">
        <v-calendar
          ref="calendar"
          v-model="focus"
          color="primary"
          :events="events"
          :event-color="getEventColor"
          :type="type"
          @click:event="showEvent"
          @click:more="viewDay"
          @click:date="viewDay"
          @change="updateRange"
        >
        </v-calendar>
 
        <v-menu
          v-model="selectedOpen"
          :close-on-content-click="false"
          :activator="selectedElement"
          offset-x
        >
          <v-card color="grey lighten-4" min-width="350px" flat>
            <v-toolbar :color="selectedEvent.color" dark>
              <v-btn icon text @click.prevent="updateEvent(selectedEvent)">
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
 
              <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card-text>
              <span v-html="selectedEvent.details"></span>
            </v-card-text>
            <v-card-actions>
              <v-btn text color="secondary" @click="selectedOpen = false">
                Fermer
              </v-btn>
              <v-btn text>Edit</v-btn>
              <v-btn text @click="deleteEvent(index)"> Effacer </v-btn>
            </v-card-actions>
          </v-card>
        </v-menu>
      </v-sheet>

Pour ma part pour ma fonction delete j'ai testé avec un

this.events.slice(index, 1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    deleteEvent: function (index) {
      this.$apollo
        .mutate({
          mutation: MUTATION_entreePlanningDelete,
          variables: {
            id: this.events.splice(index, 1),
          },
        })
 
        .then((data) => {
          console.log(data);
        });
    },

[Séb.]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<v-btn text @click="deleteEvent(index)"> Effacer </v-btn>

Je ne vois pas d'où vient la variable index

Et puis t'es sûr qu'il faut envoyer un index et pas plutôt un ID ? Apollo va retrouver ses petits en bdd avec un index ?

[Histo]

Oui effectivement c'est un id et pas un index, Apollo va chercher en base de donnée un id.

[Histo]

Bonjour j'ai résolu mon soucis


Je n'avais pas fait attention il fallait juste mettre en paramétre event = à l'événement selectionné dans le calendrier d'ajouter .id pour dire de récupérer l'id de l'événement.


Voici côté template se qu'il fallait faire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 <v-card color="grey lighten-4" min-width="350px" flat>
            <v-toolbar :color="selectedEvent.color" dark>
              <v-btn icon text @click.prevent="updateEvent(selectedEvent)">
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
 
              <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card-text>
              <span v-html="selectedEvent.details"></span>
            </v-card-text>
            <v-card-actions>
              <v-btn text color="secondary" @click="selectedOpen = false">
                Fermer
              </v-btn>
              <v-btn text @click="show = !show">Modifier</v-btn>
              <v-btn text @click="deleteEvent(selectedEvent)"> Effacer </v-btn>
            </v-card-actions>
            <v-expand-transition max-width="500">
              <div v-show="show">
                <v-divider></v-divider>
 
                <v-container>
                  <v-form
                    ref="form"
                    @submit.prevent="updateEvent(selectedEvent)"
                    v-model="valid"
                    lazy-validation
                  >
                    <v-text-field
                      v-model="name"
                      type="text"
                      label="label"
                      :counter="30"
                      :rules="[(v) => !!v || 'Veuillez sélectionner une label']"
                    ></v-text-field>
                    <v-text-field
                      v-model="details"
                      type="text"
                      label="description"
                      required
                    ></v-text-field>
                    <v-text-field
                      v-model="start"
                      type="date"
                      label="date de Debut"
                      :rules="[
                        (v) => !!v || 'Veuillez sélectionner une date de début',
                      ]"
                      prepend-icon="mdi-calendar"
                      required
                    ></v-text-field>
 
                    <v-text-field
                      v-model="end"
                      type="date"
                      label="date de Fin"
                      :rules="[
                        (v) => !!v || 'Veuillez sélectionner une date de fin',
                      ]"
                      prepend-icon="mdi-calendar"
                      required
                    ></v-text-field>
                    <v-btn
                      type="submit"
                      color="primary"
                      class="mr-4"
                      :disabled="!valid"
                      @click.stop="dialog = false"
                    >
                      valider la modification
                    </v-btn>
                  </v-form>
                </v-container>
              </div>
            </v-expand-transition>
          </v-card>

Voici ma fonction Delete qui récupère l'id de mon événement et qui la stock dans la variable id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
    deleteEvent: function (event) {
      // fonction récupère l'id de l'entrée et la supprime
      this.$apollo
        .mutate({
          mutation: MUTATION_entreePlanningDelete,
          variables: {
            id: event.id,
          },
          refetchQueries: [{ query: QUERY_entreesPlanning }], // refetchQueries me permet d'actualiser l'entrée planning après la mutation
        })
 
        .then((data) => {
          console.log(data);
        });
    },