<template>
    <span>
        <v-progress-circular
            indeterminate
            v-if="request.processing"
            size="20"
            width="1"
        >
        </v-progress-circular>

        <span
            v-else-if="user"
        >
            {{ user.full_name }}
        </span>
        
        <v-icon 
            v-else
            size="20"
            color="red"
        >
            mdi-alert
        </v-icon>
    </span>
</template>

<script>
    import Request from '@CsClasses/Request/Request';

    export default {
        props: {
            id: {required: true},
        },

        data: () => ({
            request: null,
            user: null,
        }),

        created() {
            this.request = (new Request());
            this.request.processing = true;
            this.request
                .SetEndpoint('users/items')
                .SetData({
                    wheres: [
                        '(`users`.`id` = ' + this.id + ')'
                    ],
                })
                .Request([
                    response => {
                        if(response.payload.paginator.data.length == 1)
                        {
                            this.user = response.payload.paginator.data[0];
                        }
                    },
                ]);
        },

        name: 'UserById',
    }
</script>