jandl-taskmanager-app/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue

<template>
  <v-dialog
    v-model="visible"
    :width="modalWidth"
    :height="modalHeight"
    persistent
    :retain-focus="false"
  >
    <v-card style="position: relative; height: 100%">
      <div class="d-flex justify-space-between align-center">
        <h1 class="text-h5">Chcete túto osobu odstrániť z tímu?</h1>
        <div class="d-flex align-start">
          <a-reset-size-button @reset="resetModalSize" />
          <a-close-button @close="closeModal()" />
        </div>
      </div>
      <v-card-text
        >{{ member.name + ' ' + member.surname }} bude odstránený/á z
        teamu.</v-card-text
      >
      <v-card-actions>
        <v-btn class="button secondary" variant="text" @click="closeModal()">
          Zrušiť
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn class="button primary" variant="text" @click="deleteMember()">
          Áno
        </v-btn>
      </v-card-actions>
      <a-resize-handle
        :current-width="modalWidthPx"
        :current-height="modalHeightPx"
        @resize="handleModalResize"
        @resize-end="handleResizeEnd"
      />
    </v-card>
  </v-dialog>
</template>

<script>
import tmUtils from '@/plugins/tm@_utils/tm.utils';
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';

export default {
  components: {
    AResizeHandle,
    AResetSizeButton,
    ACloseButton,
  },
  mixins: [modalMixin],

  data() {
    return {
      visible: false,
      member: null,
      team: null,
      modalName: 'z-delete-team-member-modal',
      modalSize: 'small',
    };
  },

  methods: {
    async showModal({ member, team }) {
      this.member = member;
      this.team = team;
      this.visible = true;
    },

    closeModal() {
      this.visible = false;
    },

    async deleteMember() {
      this.team.employees = [...this.team.employees].filter(
        (employee) => employee.id !== this.member.id,
      );

      try {
        if (this.team.id) {
          const { team } = await this.$axios.put_auth(
            `v1/teams/${this.team.id}`,
            this.team,
          );
          this.$store.commit('tm/update_team', team);
        } else {
          const { team } = await this.$axios.post_auth(`v1/teams`, this.team);
          this.$store.commit('tm/save_team', team);
        }

        this.$events.emit('master-task:team-member-deleted', {
          teamId: this.team.id,
          memberId: this.member.id,
        });
        this.closeModal();
      } catch (error) {
        this.$toast.error(this.$parseError(error));
      }
    },

    _enrichTeam(team) {
      team.employees = tmUtils.enrichEmployees(team.employees);
      return team;
    },
  },
};
</script>