Merge pull request #476 from Shelf-nu/fix-uncategorized-bug

Fix uncategorized bug
Shelf-nu · Oct 23, 2023 · 78b66cb · 78b66cb
2 parents c1bb501 + 2eea049
commit 78b66cb
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 10 deletions.
diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
@@ -138,7 +138,7 @@ export const AssetForm = ({
         className="border-b-0 pb-[10px]"
         required={zodFieldIsRequired(FormSchema.shape.category)}
       >
-        <CategorySelect defaultValue={category || undefined} />
+        <CategorySelect defaultValue={category || "uncategorized"} />
       </FormRow>
 
       <FormRow

diff --git a/app/components/category/category-select.tsx b/app/components/category/category-select.tsx
@@ -62,6 +62,11 @@ export const CategorySelect = ({ defaultValue }: { defaultValue?: string }) => {
                 </div>
 
                 <div className="border-b border-b-gray-300 py-2 ">
+                  <SelectItem value={"uncategorized"} key={"uncategorized"}>
+                    <Badge color={"#808080"} noBg withDot={false}>
+                      Uncategorized
+                    </Badge>
+                  </SelectItem>
                   {refinedCategories.map((c) => (
                     <SelectItem value={c.id} key={c.id}>
                       <Badge color={c.color} noBg withDot={false}>

diff --git a/app/components/list/filters/category/category-checkbox-dropdown.tsx b/app/components/list/filters/category/category-checkbox-dropdown.tsx
@@ -40,6 +40,12 @@ export const CategoryCheckboxDropdown = () => {
   const [, setInitialSelect] = useAtom(addInitialSelectedCategoriesAtom);
   const [, clearFilters] = useAtom(clearCategoryFiltersAtom);
 
+  const uncategorizedItemObj: any = {
+    id: "uncategorized",
+    name: "uncategorized",
+    color: "#808080",
+  };
+
   const hasCategories = useMemo(
     () => refinedCategories.length > 0,
     [refinedCategories]
@@ -121,6 +127,11 @@ export const CategoryCheckboxDropdown = () => {
                 )}
               </div>
               <div className="">
+                <CheckboxItem
+                  key={uncategorizedItemObj.id}
+                  category={uncategorizedItemObj}
+                  selected={items}
+                />
                 {refinedCategories.map((c) => (
                   <CheckboxItem key={c.id} category={c} selected={items} />
                 ))}

diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
@@ -127,9 +127,22 @@ export async function getAssets({
   }
 
   if (categoriesIds && categoriesIds.length > 0 && where.asset) {
-    where.asset.categoryId = {
-      in: categoriesIds,
-    };
+    if (categoriesIds.includes("uncategorized")) {
+      where.asset.OR = [
+        {
+          categoryId: {
+            in: categoriesIds,
+          },
+        },
+        {
+          categoryId: null,
+        },
+      ];
+    } else {
+      where.asset.categoryId = {
+        in: categoriesIds,
+      };
+    }
   }
 
   if (tagsIds && tagsIds.length > 0 && where.asset) {
@@ -235,7 +248,7 @@ export async function createAsset({
   };
 
   /** If a categoryId is passed, link the category to the asset. */
-  if (categoryId) {
+  if (categoryId !== "uncategorized") {
     Object.assign(data, {
       category: {
         connect: {
@@ -313,6 +326,7 @@ interface UpdateAssetPayload {
   id: Asset["id"];
   title?: Asset["title"];
   description?: Asset["description"];
+  /** Pass 'uncategorized' to clear the category */
   categoryId?: Asset["categoryId"];
   newLocationId?: Asset["locationId"];
   currentLocationId?: Asset["locationId"];
@@ -347,8 +361,17 @@ export async function updateAsset(payload: UpdateAssetPayload) {
     mainImageExpiration,
   };
 
-  /** Delete the category id from the payload so we can use connect syntax from prisma */
-  if (categoryId) {
+  /** If uncategorized is passed, disconnect the category */
+  if (categoryId === "uncategorized") {
+    Object.assign(data, {
+      category: {
+        disconnect: true,
+      },
+    });
+  }
+
+  // If category id is passed and is differenent than uncategorized, connect the category
+  if (categoryId && categoryId !== "uncategorized") {
     Object.assign(data, {
       category: {
         connect: {
@@ -358,7 +381,7 @@ export async function updateAsset(payload: UpdateAssetPayload) {
     });
   }
 
-  /** Delete the category id from the payload so we can use connect syntax from prisma */
+  /** Connect the new location id */
   if (newLocationId) {
     Object.assign(data, {
       location: {

diff --git a/app/routes/_layout+/assets.$assetId.tsx b/app/routes/_layout+/assets.$assetId.tsx
@@ -251,7 +251,18 @@ export default function AssetDetailsPage() {
                     </Badge>
                   </div>
                 </li>
-              ) : null}
+              ) : (
+                <li className="mb-4 flex justify-between">
+                  <span className="text-[12px] font-medium text-gray-600">
+                    Category
+                  </span>
+                  <div className="max-w-[250px]">
+                    <Badge color={"#808080"} withDot={false}>
+                      Uncategorized
+                    </Badge>
+                  </div>
+                </li>
+              )}
               {location ? (
                 <li className="mb-2 flex justify-between">
                   <span className="text-[12px] font-medium text-gray-600">

diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
@@ -286,7 +286,11 @@ const ListAssetContent = ({
           <Badge color={category.color} withDot={false}>
             {category.name}
           </Badge>
-        ) : null}
+        ) : (
+          <Badge color={"#808080"} withDot={false}>
+            {"Uncategorized"}
+          </Badge>
+        )}
       </Td>
 
       {/* Tags */}