diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue index bbbf30090..e46f45da5 100644 --- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue +++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue @@ -14,6 +14,11 @@ const props = defineProps({ type: String, default: 'conversation', }, + action: { + type: String, + default: 'assign', + validator: value => ['assign', 'remove'].includes(value), + }, isLoading: { type: Boolean, default: false, @@ -22,9 +27,13 @@ const props = defineProps({ type: Boolean, default: false, }, + appliedLabels: { + type: Array, + default: null, + }, }); -const emit = defineEmits(['assign']); +const emit = defineEmits(['assign', 'remove']); const { t } = useI18n(); @@ -35,17 +44,43 @@ const [showDropdown, toggleDropdown] = useToggle(false); const selectedLabels = ref([]); const isTypeContact = computed(() => props.type === 'contact'); +const isRemoveAction = computed(() => props.action === 'remove'); -const buttonLabel = computed(() => - props.type === 'contact' ? t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS') : '' +const buttonLabel = computed(() => { + if (!isTypeContact.value) return ''; + + return isRemoveAction.value + ? t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS') + : t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS'); +}); + +const tooltipLabel = computed(() => + isRemoveAction.value + ? t('BULK_ACTION.LABELS.REMOVE_LABELS') + : t('BULK_ACTION.LABELS.ASSIGN_LABELS') +); + +const confirmLabel = computed(() => + isRemoveAction.value + ? t('BULK_ACTION.LABELS.REMOVE_SELECTED_LABELS') + : t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') ); const isLabelSelected = labelTitle => { return selectedLabels.value.includes(labelTitle); }; +const visibleLabels = computed(() => { + if (!isRemoveAction.value || props.appliedLabels === null) { + return labels.value; + } + + const applied = new Set(props.appliedLabels); + return labels.value.filter(label => applied.has(label.title)); +}); + const labelMenuItems = computed(() => { - return labels.value.map(label => ({ + return visibleLabels.value.map(label => ({ action: 'select', value: label.title, label: label.title, @@ -64,9 +99,13 @@ const toggleLabelSelection = labelTitle => { } }; -const handleAssign = () => { +const handleApply = () => { if (selectedLabels.value.length > 0) { - emit('assign', selectedLabels.value); + if (isRemoveAction.value) { + emit('remove', selectedLabels.value); + } else { + emit('assign', selectedLabels.value); + } toggleDropdown(false); selectedLabels.value = []; } @@ -81,9 +120,9 @@ const handleDismiss = () => { diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue index 145e89bde..eef70cf02 100644 --- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue +++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue @@ -1,5 +1,6 @@