chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue

<template>
    <span
        v-if="props.entity.type === 'person'"
        class="badge rounded-pill bg-person"
    >
        {{ trans(PERSON) }}
    </span>

    <span
        v-if="props.entity.type === 'thirdparty'"
        class="badge rounded-pill bg-thirdparty"
    >
        <template v-if="props.options.displayLong !== true">
            {{ trans(THIRDPARTY) }}
        </template>

        <i class="fa fa-fw fa-user" v-if="props.entity.kind === 'child'" />
        <i
            class="fa fa-fw fa-hospital-o"
            v-else-if="props.entity.kind === 'company'"
        />
        <i class="fa fa-fw fa-user-md" v-else />

        <template v-if="props.options.displayLong === true">
            <span v-if="props.entity.kind === 'child'">{{
                trans(THIRDPARTY_CONTACT_OF)
            }}</span>
            <span v-else-if="props.entity.kind === 'company'">{{
                trans(THIRDPARTY_A_COMPANY)
            }}</span>
            <span v-else>{{ trans(THIRDPARTY_A_CONTACT) }}</span>
        </template>
    </span>

    <span
        v-if="props.entity.type === 'user'"
        class="badge rounded-pill bg-user"
    >
        {{ trans(ACCEPTED_USERS) }}
    </span>

    <span
        v-if="props.entity.type === 'household'"
        class="badge rounded-pill bg-user"
    >
        {{ trans(HOUSEHOLD) }}
    </span>
</template>

<script setup>
import {
    trans,
    HOUSEHOLD,
    ACCEPTED_USERS,
    THIRDPARTY_A_CONTACT,
    THIRDPARTY_CONTACT_OF,
    THIRDPARTY_A_COMPANY,
    PERSON,
    THIRDPARTY,
} from "translator";

const props = defineProps({
    options: Object,
    entity: Object,
});
</script>