Component

<template>
    <fragment>
        <md-table-cell md-label="Nom">{{
                player.username
            }}</md-table-cell>
        <md-table-cell md-label="Uuid">{{
                player.minecraftUuid
            }}</md-table-cell>
        <md-table-cell md-label="Grades">
            <template v-if="player.playerRanks !== undefined && player.playerRanks.length">
                <player-ranks-badge :player-ranks="player.playerRanks"></player-ranks-badge>
            </template>
        </md-table-cell>
        <md-table-cell md-label="Actions">
            <router-link
                class="md-just-icon md-info md-simple"
                v-slot="{ href, navigate }"
                :to="{name: 'PlayerShow', params: { id: player['@id'] }}">
                <md-button :href="href" class="md-just-icon md-info md-simple" @click.native="navigate">
                    <md-icon>eye</md-icon>
                </md-button>
            </router-link>
        </md-table-cell>
    </fragment>
</template>

<script>
import PlayerRanksBadge from "@/views/components/Badges/PlayerRanksBadge";

export default {
    components: {PlayerRanksBadge},
    props: {
        player: {
            type: Object
        }
    },
};
</script>

<template>
    <md-card-content>
        <loading :active.sync="isLoading"
                 :can-cancel="false"
                 :isFullPage="false"
                />
        <div
            v-if="error"
            class="alert alert-danger">{{ error }}</div>
        <md-table
            :value="items"
            class="paginated-table table-striped table-hover"
        >
            <md-table-row slot="md-table-row" slot-scope="{ item }" :key="item['@id']">
                <Item :player="item" />
            </md-table-row>
        </md-table>
    </md-card-content>
</template>

<script>
import { mapActions } from 'vuex';
import { createHelpers } from 'vuex-map-fields';
import Loading from 'vue-loading-overlay'
import Item from './Item';

const { mapFields } = createHelpers({
    getterType: 'AdminPlayerModule/List/getField',
    mutationType: 'AdminPlayerModule/List/updateField',
});

export default {
    components: {
        Item,
        Loading,
    },
    computed: {
        ...mapFields({
            error: 'error',
            items: 'items',
            isLoading: 'isLoading',
        }),
    },
    mounted() {
        this.getPage(this.$route.query);
    },
    watch: {
        $route: function() {
            this.getPage(this.$route.query);
        },
    },
    methods: {
        ...mapActions({
            getPage: 'AdminPlayerModule/List/default',
        }),
    },
};
</script>

<template>
    <RankBadge :rank="getItem(playerRank)"></RankBadge>
</template>

<script>
import RankBadge from './RankBadge';
import { mapGetters, mapActions } from 'vuex';

export default {
    name: "PlayerRanksBadge",
    components: {
        RankBadge,
    },
    computed: {
        ...mapGetters({
            getItem: "ComponentModule/getItem",
        }),
    },
    props: {
        playerRank: {
            type: String,
            required: true,
        }
    },
    mounted() {
        this.getPage(this.$route.query);
    },
    methods: {
        ...mapActions({
            getPage: 'AdminPlayerModule/List/default',
        }),
    },
}
</script>

<template>
    <div>
        <template v-for="playerRank in playerRanks">
            <player-rank-badge v-bind:key="playerRank" :player-rank="playerRank"/>
        </template>
    </div>
</template>

<script>
import PlayerRankBadge from './PlayerRankBadge';

export default {
    name: "PlayerRanksBadge",
    components: {
        PlayerRankBadge
    },
    props: {
        playerRanks: {
            type: Array,
            required: true,
        }
    },
}
</script>

<template>
    <badge>{{ getItem(this.rank) }}</badge>
</template>

<script>
import Badge from '@/components/Badge';
import { mapGetters } from 'vuex';

export default {
    name: "PlayerRanksBadge",
    components: {
        Badge,
    },
    computed: {
        ...mapGetters({
            getItem: "ComponentModule/getItem",
        }),
    },
    props: {
        rank: {
            type: String,
            required: true,
        }
    },
}
</script>