Feature Request: Proper tag field support with visual tag editor and display

[smartlabsAT]

✨ Feature Request

Description

Currently, tag fields are displayed and edited as raw JSON objects in the table and inline editor. This provides a poor user experience and makes tag management difficult. We need proper visual tag representation and an intuitive tag editor interface, similar to how tags work in the standard Directus form view.

Current Problems

• ❌ Tags displayed as JSON string: ["tag1","tag2","tag3"]
• ❌ Editing requires manual JSON manipulation
• ❌ No visual tag chips/badges in table cells
• ❌ Error-prone manual JSON editing
• ❌ No auto-complete or tag suggestions
• ❌ Poor user experience compared to native Directus

Proposed Solution

Implement proper tag field support with visual tag display and an intuitive tag editor interface.

Visual Design

Table Cell Display

Current (Poor UX):

| Tags                        |
| ["marketing","urgent","q4"] |

Proposed (Good UX):

| Tags                        |
| [marketing] [urgent] [q4]   |

With styled tag chips:

<div class="tag-cell">
  <span class="tag-chip">marketing</span>
  <span class="tag-chip">urgent</span>
  <span class="tag-chip">q4</span>
</div>

Inline Editor Interface

┌─────────────────────────────────────┐
│ Edit Tags                           │
├─────────────────────────────────────┤
│                                     │
│ [marketing ×] [urgent ×] [q4 ×]    │
│                                     │
│ Add tag: [___________] [+ Add]      │
│                                     │
│ Suggestions:                        │
│ [important] [review] [pending]      │
│                                     │
│ [Cancel]              [Save]        │
└─────────────────────────────────────┘

Implementation Details

Tag Cell Renderer Component

<!-- src/components/CellRenderers/TagCell.vue -->
<template>
  <div class="tag-cell">
    <span 
      v-for="tag in parsedTags" 
      :key="tag"
      class="tag-chip"
      :style="getTagStyle(tag)"
    >
      {{ tag }}
    </span>
    <span v-if="hasMore" class="tag-more">
      +{{ additionalCount }} more
    </span>
  </div>
</template>

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

const props = defineProps({
  value: [String, Array],
  maxVisible: { type: Number, default: 3 }
});

const parsedTags = computed(() => {
  if (!props.value) return [];
  if (Array.isArray(props.value)) return props.value;
  try {
    return JSON.parse(props.value);
  } catch {
    return [];
  }
});

const visibleTags = computed(() => 
  parsedTags.value.slice(0, props.maxVisible)
);

const hasMore = computed(() => 
  parsedTags.value.length > props.maxVisible
);

const additionalCount = computed(() => 
  parsedTags.value.length - props.maxVisible
);
</script>

<style scoped>
.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  background: var(--primary-25);
  color: var(--primary);
  border-radius: 4px;
  font-size: 0.875em;
}
</style>

Tag Editor Component

<!-- src/components/TagEditor.vue -->
<template>
  <div class="tag-editor">
    <div class="current-tags">
      <div 
        v-for="tag in tags" 
        :key="tag"
        class="tag-chip removable"
        @click="removeTag(tag)"
      >
        {{ tag }}
        <v-icon name="close" small />
      </div>
    </div>
    
    <div class="add-tag">
      <v-input
        v-model="newTag"
        placeholder="Add tag..."
        @keydown.enter="addTag"
      />
      <v-button @click="addTag" icon secondary>
        <v-icon name="add" />
      </v-button>
    </div>
    
    <div v-if="suggestions.length" class="suggestions">
      <span class="label">Suggestions:</span>
      <div 
        v-for="suggestion in suggestions"
        :key="suggestion"
        class="suggestion-chip"
        @click="addTag(suggestion)"
      >
        {{ suggestion }}
      </div>
    </div>
  </div>
</template>

Features to Implement

1. Core Functionality

• Visual tag display in cells
• Tag editor interface
• Add/remove tags easily
• JSON to visual conversion
• Visual to JSON conversion

2. Enhanced Features

• Tag auto-complete
• Tag suggestions from existing data
• Color coding for tag categories
• Tag search/filter
• Drag to reorder tags
• Bulk tag operations
• Tag templates/presets

3. Configuration Options

{
  tagField: {
    maxVisibleTags: 3,        // Show "+" for more
    allowCustomTags: true,    // Allow new tag creation
    suggestions: true,        // Show tag suggestions
    colorScheme: 'auto',      // auto, category, custom
    sortAlphabetically: false,
    caseSensitive: false,
    delimiter: ',',          // For copy/paste
    validation: {
      minLength: 2,
      maxLength: 30,
      pattern: /^[\w-]+$/     // Alphanumeric + dash
    }
  }
}

Tag Styling Options

Color Schemes

1. Auto: Generate colors based on tag name hash
2. Category: Assign colors by tag prefix/category
3. Priority: Color by importance (red, yellow, green)
4. Custom: User-defined color mappings

const tagColors = {
  'urgent': '#ff4444',
  'important': '#ff9800',
  'review': '#2196f3',
  'approved': '#4caf50',
  // Auto-generate for others
};

Advanced Features

Tag Management Panel

• Global tag library
• Tag usage statistics
• Rename tags globally
• Merge duplicate tags
• Tag hierarchies/groups

Import/Export

• Paste comma-separated values
• Export as CSV
• Copy all tags to clipboard
• Import from predefined lists

Integration with Directus

Use Existing Directus Components

// Leverage Directus tag interface if available
import { useInterface } from '@directus/extensions-sdk';

const tagInterface = useInterface('tags');
// Fallback to custom implementation if not available

Sync with Directus Tag System

• Use Directus preset tag values
• Respect field configuration
• Maintain compatibility with form view

Benefits

1. Improved UX: Visual tags instead of JSON strings
2. Reduced Errors: No manual JSON editing required
3. Efficiency: Quick tag management with suggestions
4. Consistency: Matches Directus native tag behavior
5. Professional: Clean, modern tag display

Acceptance Criteria

• Tags display as visual chips in table cells
• Click cell to open tag editor (not JSON editor)
• Can add tags via input field
• Can remove tags by clicking X
• Tag changes save correctly as JSON array
• Supports both array and JSON string formats
• Responsive design for many tags
• Keyboard navigation support
• Works with existing tag field data

Priority

High - Tag fields are common in content management systems, and proper support is essential for a professional table interface.

---

Note: This feature would bring tag field support up to par with native Directus functionality, providing a much better user experience for managing tagged content.