WunschFrontend/components/publicwishlist.vue

<template>
  <div>
    <v-card>
      <v-card-title>Öffentliche Wunschliste</v-card-title>
      <v-card-text>
        Alle hier sichtbaren Wünsche sind noch frei.<br />
        Nutze den orangenen Knopf um einen Wunsch zu reservieren.
      </v-card-text>
    </v-card>

    <v-card class='mt-2' v-for='user in $store.state.users.users' v-bind:key='user.id+user.name'>
      <v-card-title>{{ user.name }}</v-card-title>
      <div>
        <v-list three-line>
          <v-list-item v-for='wish in userWishes(user.id)' v-bind:key='wish.id+wish.wish' class='pa-2'>
            <v-list-item-content>
              <v-list-item-subtitle class='pl-4'>{{ wish.wish }}</v-list-item-subtitle>
            </v-list-item-content>
            <v-tooltip top>
              <template v-slot:activator="{ on }">
                <v-btn v-on:click='claimWish(wish.id)' outlined color='secondary'><v-icon>mdi-playlist-check</v-icon></v-btn>
              </template>
              <span>Reservieren</span>
            </v-tooltip>
          </v-list-item>
        </v-list>
      </div>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'publicwishlist',
  methods: {
    userWishes(id) {
      console.log(this.$store.state.wishes.public)
      return this.$store.state.wishes.public.filter((wish) => {
        return wish.owner_id === id;
      });
    },
    async claimWish(id) {
      let response = await this.$swal({
        title: 'Wunsch reservieren?',
        html: 'Du kannst Wünsche <b>NICHT</b> wieder freigeben!<br />Bitte sei dir sicher <b>bevor</b> du reservierst!',
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: "Abbrechen",
        confirmButtonText: 'Reservieren',
      });

      if (!response.value) {
        return;
      }

      this.$store.dispatch("wishes/claimWish", id).then(() => {
        this.$swal({
          title: 'Erfolgreich reserviert',
          type: 'success',
          showConfirmButton: false,
          timerProgressBar: true,
          timer: 1500,
          toast: true,
          position: 'bottom-center',
          iconColor: 'white'
        })
      });
    }
  }
}
</script>

<style scoped>
.justfuckingwrapthegoddamntextthisissodamnstupid {
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
  word-break: break-all;
  white-space: normal;
}
</style>