feat(admin): bulk tag assignment for products

Author: joepaolicelli

app/components/BulkProductEditor.vue

@@ -8,18 +8,24 @@ import type { CamelCasedPropertiesDeep } from 'type-fest';
 import { productTypes } from '~~/db/schema';
 import type { Tables } from '~~/types/database.types';
 import { useBrands } from '~/queries/brands';
+import { useTags } from '~/queries/tags';
 
 const supabase = useSupabaseClient();
 const toast = useToast();
 const statusToaster = new StatusToaster('Bulk Products');
 
 const { brands } = useBrands();
+const { tags } = useTags();
 
 const { products } = defineProps<{
   products: PendingProduct[];
 }>();
 const emit = defineEmits(['clearAll', 'refetchAll', 'selectAll']);
 
+const availableTagsByCategory: Ref<
+  ReturnType<typeof getTagsForProductTypeByCategory>
+> = ref([]);
+
 const selectedProducts = computed(() => {
   return products.filter((p) => p != null && p.selected);
 });
@@ -54,8 +60,22 @@ const productType: Ref<productTypeType> = ref('[null]');
 const productTypeNotes = ref('');
 const productTypeOptions = ref(['[null]', ...productTypes]);
 
+const tagsToAdd: Ref<string[]> = ref([]);
+const tagsToRemove: Ref<string[]> = ref([]);
+const addTagToBeChanged = (tagId: string, selected: boolean | string) => {
+  // Selected is reversed because it is the value of the checkbox before the
+  // change.
+  if (selected === false || selected === 'indeterminate') {
+    tagsToAdd.value = _.uniq([...tagsToAdd.value, tagId]);
+    tagsToRemove.value = tagsToRemove.value.filter((t) => t !== tagId);
+  } else if (selected === true) {
+    tagsToRemove.value = _.uniq([...tagsToRemove.value, tagId]);
+    tagsToAdd.value = tagsToAdd.value.filter((t) => t !== tagId);
+  }
+};
+
 watch(
-  [() => products, () => brands],
+  [() => products, () => brands, () => tags],
   () => {
     // Brand
     if (brands.value.data) {
@@ -82,6 +102,35 @@ watch(
       productType.value = '';
       productTypeNotes.value = `${currentTypes.length} current types`;
     }
+
+    // Tags
+    if (tags?.value?.data && currentTypes.length === 1) {
+      availableTagsByCategory.value = getTagsForProductTypeByCategory(
+        tags.value.data ?? [],
+        currentTypes[0] ?? null,
+      );
+      for (const tagCat of availableTagsByCategory.value) {
+        if (tagCat.tags) {
+          for (const tag of tagCat.tags) {
+            const checkedCount = selectedProducts.value.reduce((acc, p) => {
+              if (p.tags.map((t) => t.id).includes(tag.id)) {
+                return acc + 1;
+              }
+              return acc;
+            }, 0);
+
+            if (checkedCount === selectedProducts.value.length) {
+              tag.selected = true;
+            } else if (checkedCount === 0) {
+              tag.selected = false;
+            } else {
+              tag.selected = 'indeterminate';
+            }
+            tag.selectedCount = checkedCount;
+          }
+        }
+      }
+    }
   },
   { immediate: true, deep: true },
 );
@@ -145,6 +194,67 @@ const { mutate: updateProductType } = useMutation({
   },
   onSettled: async () => emit('refetchAll'),
 });
+
+const { mutate: updateTags } = useMutation({
+  mutation: async () => {
+    sending.value = true;
+
+    let toAddErrored = false;
+    let toRemoveErrored = false;
+    if (tagsToAdd.value.length > 0) {
+      const { error } = await supabase.from('product_tags').insert(
+        tagsToAdd.value
+          .filter((t) => t != null)
+          .map((tag) =>
+            selectedProducts.value.map((sp) =>
+              objectToSnake({
+                productId: sp.id,
+                tagId: tag,
+              }),
+            ),
+          )
+          .flat(),
+      );
+
+      if (error) {
+        statusToaster.error('Update Failed!', error.message);
+        console.log(error);
+        toAddErrored = true;
+      } else {
+        statusToaster.success('Updated!');
+      }
+    }
+
+    if (!toAddErrored && tagsToRemove.value.length > 0) {
+      for (const toRemove of tagsToRemove.value) {
+        const { error } = await supabase
+          .from('product_tags')
+          .delete()
+          .eq('tag_id', toRemove)
+          .in(
+            'product_id',
+            selectedProducts.value.map((sp) => sp.id),
+          );
+
+        if (error) {
+          statusToaster.error('Update Failed!', error.message);
+          console.log(error);
+          toRemoveErrored = true;
+          break;
+        }
+      }
+
+      if (!toAddErrored && !toRemoveErrored) {
+        tagsToAdd.value = [];
+        tagsToRemove.value = [];
+        statusToaster.success('Updated!');
+      }
+    }
+
+    sending.value = false;
+  },
+  onSettled: async () => emit('refetchAll'),
+});
 </script>
 <template>
   <div>
@@ -201,6 +311,75 @@ const { mutate: updateProductType } = useMutation({
         :products="products"
         @refetch-all="emit('refetchAll')"
       />
+      <div>
+        <div class="flex flex-wrap">
+          <div
+            v-for="tagCat of availableTagsByCategory"
+            :key="tagCat.categoryName"
+            class="mx-1 flex flex-col flex-wrap"
+          >
+            {{ tagCat.categoryName }}
+            <div v-for="tag of tagCat.tags" :key="tag.id">
+              <UCheckbox
+                v-model="tag.selected"
+                color="primary"
+                variant="card"
+                :disabled="sending"
+                class="py-1"
+                @click="addTagToBeChanged(tag.id, tag.selected)"
+              >
+                <template #label>
+                  {{ tag.name }}
+                  <UBadge
+                    variant="outline"
+                    :color="
+                      tag.selectedCount === 0
+                        ? 'neutral'
+                        : tag.selectedCount === selectedProducts.length
+                          ? 'success'
+                          : 'info'
+                    "
+                    class="ml-2"
+                    >{{ tag.selectedCount }}/{{
+                      selectedProducts.length
+                    }}</UBadge
+                  >
+                  <UBadge
+                    v-if="tagsToAdd.includes(tag.id)"
+                    color="success"
+                    class="ml-2"
+                    ><UIcon name="i-lucide-plus"
+                  /></UBadge>
+                  <UBadge
+                    v-if="tagsToRemove.includes(tag.id)"
+                    color="error"
+                    class="ml-2"
+                    ><UIcon name="i-lucide-minus"
+                  /></UBadge>
+                </template>
+              </UCheckbox>
+            </div>
+          </div>
+        </div>
+        <UButton
+          type="button"
+          color="info"
+          class="mt-2 h-fit self-end"
+          @click="updateTags()"
+          >Update {{ tagsToAdd.length + tagsToRemove.length }} tags</UButton
+        >
+        <UButton
+          type="button"
+          color="info"
+          variant="outline"
+          class="mx-2 mt-2 h-fit self-end"
+          @click="
+            tagsToAdd = [];
+            tagsToRemove = [];
+          "
+          >Clear Tag Changes</UButton
+        >
+      </div>
     </div>
   </div>
 </template>

app/components/ProductTagSelector.vue

@@ -9,7 +9,7 @@ import { useTags } from '~/queries/tags';
 const supabase = useSupabaseClient();
 const statusToaster = new StatusToaster('Filament Tags');
 
-// Just used for type for prop.
+// Just used for type for prop. TODO replace.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const productWithTagsQuery = supabase
   .from('products')

app/utils/utils.ts

@@ -70,8 +70,19 @@ export const getTagsForProductTypeByCategory = (
       categoryName: tc[0],
       tags: tc[1]
         ?.toSorted((a, b) => a.name.localeCompare(b.name))
-        // Add a selected boolean for use by components.
-        .map((t) => ({ ...t, selected: false })),
+        // Add selected and selectedCount fields for use by components.
+        .map(
+          (
+            t,
+          ): TagWithCategory & {
+            selected: boolean | 'indeterminate';
+            selectedCount: number;
+          } => ({
+            ...t,
+            selected: false,
+            selectedCount: 0, // Used for bulk editing.
+          }),
+        ),
     }));
 
     // Sort alphabetically by categoryName, putting 'None' last.