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 @@
@@ -103,6 +108,13 @@ const handleAssignLabels = labels => {
:disabled="!selectedCount"
@assign="handleAssignLabels"
/>
+