The DRY Approach to CRM Status Displays: Building a Universal Badge Component

Are you wrestling with a CRM that's bursting at the seams with multiple models, each flaunting its own set of statuses? If you've ever found yourself drowning in a sea of repetitive code updates just to change a simple status display, you're in the right place. This post is your lifeline to a more efficient, maintainable solution.

Imagine a world where you can update status displays across your entire application by tweaking just one piece of code. Sounds too good to be true? Well, buckle up, because we're about to make it a reality.

In this guide, we'll dive into:

1. The power of Enums and dynamic types
2. Creating a sleek, color-coded badge system for different statuses
3. Implementing a centralized approach to status management

//TaskStatusBadge.vue

<script setup>
import { startCase } from 'lodash';
import { computed } from 'vue';

const props = defineProps({
    status: {
        type: String,
        required: true
    }
});

const color = {
    'draft': 'bg-yellow-50 text-yellow-800 ring-yellow-600/20',
    'pending': 'bg-blue-50 text-blue-800 ring-blue-600/20',
    'in progress': 'bg-indigo-50 text-indigo-800 ring-indigo-600/20',
    'completed': 'bg-green-50 text-green-800 ring-green-600/20',
    'default': 'bg-gray-50 text-gray-800 ring-gray-600/20',
};

const badgeColor = computed(() => {
    return color[props.status] ?? color['default'];
});
</script>

<template>
    <span
        class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset"
        :class="badgeColor"
    >
        {{ startCase(status) }}
    </span>
</template>

1. Limited Scope: This component is tailored for a specific set of statuses. What happens when we need to add a new status or change an existing one? We'd have to modify the component itself.
2. Repetitive Code: With 5 different badge components for various models, we're violating the DRY (Don't Repeat Yourself) principle. This leads to maintenance headaches and increased chances of inconsistencies.
3. Scalability Concerns: As our application grows, creating a new component for each model's statuses or types becomes unsustainable.

• Accepts a :type prop to specify the current status
• Takes a :types prop to define all possible statuses and their corresponding styles
• Automatically renders the correct badge based on these props

• Use the same component for all models, reducing code duplication
• Easily add or modify statuses without touching the component's internal logic
• Ensure consistency across our entire application

// Badge.vue

<script setup>
import { startCase } from 'lodash';
import { computed } from 'vue';

const props = defineProps({
    type: {
        type: String,
        required: true
    },
    types: {
        type: Object,
        required: true,
    }
});

const badgeColor = computed(() => {
    return props.types[props.type] || 'gray-badge';
});
</script>

<template>
    <span
        class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset"
        :class="badgeColor"
    >
        {{ startCase(type) }}
    </span>
</template>

• type: The current status or type
• types: An object mapping types to their corresponding color classes

// App\Enums\ClientTypes.php

<?php

namespace App\Enums;

enum ClientTypes: string
{
    case LEAD = 'lead';
    case PROSPECT = 'prospect';
    case CUSTOMER = 'customer';
    case INACTIVE = 'inactive';
    case REFERRED = 'referred';
    case VIP = 'vip';

    public static function toSelectArray(): array
    {
        return collect(self::cases())
            ->mapWithKeys(function ($case) {
                return [$case->value => ucwords(str_replace('_', ' ', $case->name))];
            })
            ->toArray();
    }

    public static function badgeColors()
    {
        return [
            self::LEAD->value => 'yellow-badge',
            self::PROSPECT->value => 'blue-badge',
            self::CUSTOMER->value => 'green-badge',
            self::INACTIVE->value => 'red-badge',
            self::REFERRED->value => 'purple-badge',
            self::VIP->value => 'indigo-badge'
        ];
    }
}

1. It defines all possible client types, ensuring consistency across your application.
2. The badgeColors() method maps each type to its corresponding color class.

/* Badge Colors */ 
.yellow-badge { 
    @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20;
}
.blue-badge { 
    @apply bg-blue-50 text-blue-800 ring-blue-600/20;
} 
/* ... other badge colors ... */

1. Pass ClientTypes::badgeColors() from your backend to your frontend.
2. In your Vue component, pass this data to the <Badge> component:

<Badge :type="client.type" :types="clientTypeBadgeColors" />

1. Centralized Management: All badge colors are defined in one place (the enum), making updates a breeze.
2. Reusability: Our <Badge> component can now be used for any model with statuses or types.
3. Scalability: Adding new types or changing existing ones no longer requires touching the component code.
4. Consistency: With colors defined in the enum, we ensure consistent styling across the application.