Récupérer l'id dans un tableau

Version imprimable

1 pièce(s) jointe(s)

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:

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.

Pièce jointe 598251

voici le tableau ainsi que les objets qui le compose.

Je vous remerci d'avance.

22/05/2021, 13h17
Séb.

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

Qu'est-ce qui te bloque exactement ?
24/05/2021, 18h27
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.
24/05/2021, 20h21
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:

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()

Code:

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:

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.

24/05/2021, 22h23
Séb.

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

Et au niveau du template ça donne quoi ?

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

Code:

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:

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: "",
      },
    };
  },

25/05/2021, 11h01
Séb.

On dirait que tu veux en montrer le moins possible :aie:

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

1 pièce(s) jointe(s)

Bonjour voici une vue plus global du template

Code:

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:

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);
        });
    },

Pièce jointe 598517

25/05/2021, 11h31
Séb.

Code:

<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 ?
25/05/2021, 11h35
Histo

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

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:

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:

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);
        });
    },