feat: delete tags

Author: nevo-david

apps/backend/src/api/routes/posts.controller.ts

@@ -81,6 +81,14 @@ export class PostsController {
     return this._postsService.editTag(id, org.id, body);
   }
 
+  @Delete('/tags/:id')
+  async deleteTag(
+    @GetOrgFromRequest() org: Organization,
+    @Param('id') id: string
+  ) {
+    return this._postsService.deleteTag(id, org.id);
+  }
+
   @Get('/')
   async getPosts(
     @GetOrgFromRequest() org: Organization,

apps/frontend/src/app/global.scss

@@ -745,7 +745,9 @@ html[dir='rtl'] [dir='ltr'] {
 }
 
 .post-now {
-  box-shadow: -33px 57px 18px 0 rgba(0, 0, 0, 0.01), -21px 36px 17px 0 rgba(0, 0, 0, 0.06), -12px 20px 14px 0 rgba(0, 0, 0, 0.20), -5px 9px 11px 0 rgba(0, 0, 0, 0.34), -1px 2px 6px 0 rgba(0, 0, 0, 0.39);
+  box-shadow: -33px 57px 18px 0 rgba(0, 0, 0, 0.01),
+    -21px 36px 17px 0 rgba(0, 0, 0, 0.06), -12px 20px 14px 0 rgba(0, 0, 0, 0.2),
+    -5px 9px 11px 0 rgba(0, 0, 0, 0.34), -1px 2px 6px 0 rgba(0, 0, 0, 0.39);
 }
 
 .uppyChange .uppy-Dashboard-inner {
@@ -780,4 +782,9 @@ html[dir='rtl'] [dir='ltr'] {
 .forceChange .changeColor {
   background: var(--new-btn-primary) !important;
   color: #fff !important;
-}
+}
+
+.text-shadow-tags {
+  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,
+    1px 1px 0 black;
+}

apps/frontend/src/components/launches/tags.component.tsx

@@ -12,7 +12,12 @@ import { useT } from '@gitroom/react/translation/get.transation.service.client';
 import { useClickOutside } from '@mantine/hooks';
 import clsx from 'clsx';
 import { useModals } from '@gitroom/frontend/components/layout/new-modal';
-import { TagIcon, DropdownArrowIcon, PlusIcon, CheckmarkIcon } from '@gitroom/frontend/components/ui/icons';
+import {
+  TagIcon,
+  DropdownArrowIcon,
+  PlusIcon,
+  CheckmarkIcon,
+} from '@gitroom/frontend/components/ui/icons';
 
 export const TagsComponent: FC<{
   name: string;
@@ -54,7 +59,9 @@ export const TagsComponentInner: FC<{
   }) => void;
 }> = ({ initial, onChange, name, mutate, allTags: data }) => {
   const t = useT();
+  const fetch = useFetch();
   const [isOpen, setIsOpen] = useState(false);
+  const [allowClose, setAllowClose] = useState(true);
   const [tagValue, setTagValue] = useState<any[]>(
     (initial?.slice(0) || []).map((p: any) => {
       return data?.tags.find((a: any) => a.name === p.value) || p;
@@ -63,7 +70,7 @@ export const TagsComponentInner: FC<{
   const modals = useModals();
 
   const ref = useClickOutside(() => {
-    if (!isOpen) {
+    if (!isOpen || !allowClose) {
       return;
     }
     setIsOpen(false);
@@ -98,6 +105,58 @@ export const TagsComponentInner: FC<{
     }
   }, []);
 
+  const deleteTag = useCallback(
+    async (tag: any, e: React.MouseEvent) => {
+      setAllowClose(false);
+      e.stopPropagation();
+      const confirmed: boolean = await new Promise((resolve) => {
+        modals.openModal({
+          title: t('delete_tag', 'Delete Tag'),
+          children: (close) => (
+            <ConfirmDeleteModal
+              tagName={tag.name}
+              close={close}
+              resolve={resolve}
+            />
+          ),
+        });
+      });
+
+      if (!confirmed) {
+        setTimeout(() => {
+          setAllowClose(true);
+        }, 500);
+        return;
+      }
+
+      await fetch(`/posts/tags/${tag.id}`, {
+        method: 'DELETE',
+      });
+
+      // Remove the tag from current selection if it was selected
+      const modify = tagValue.filter((a) => a.id !== tag.id);
+      if (modify.length !== tagValue.length) {
+        setTagValue(modify);
+        onChange({
+          target: {
+            value: modify.map((p: any) => ({
+              label: p.name,
+              value: p.name,
+            })),
+            name,
+          },
+        });
+      }
+
+      await mutate();
+
+      setTimeout(() => {
+        setAllowClose(true);
+      }, 500);
+    },
+    [tagValue, name, onChange, mutate, fetch, modals, t]
+  );
+
   return (
     <div
       ref={ref}
@@ -122,7 +181,7 @@ export const TagsComponentInner: FC<{
                 className="h-full flex justify-center items-center px-[8px] rounded-[4px]"
                 style={{ backgroundColor: tagValue[0].color }}
               >
-                <span className="mix-blend-difference text-[#fff]">
+                <span className="text-shadow-tags text-[#fff]">
                   {tagValue[0].name}
                 </span>
               </div>
@@ -158,20 +217,28 @@ export const TagsComponentInner: FC<{
                 });
               }}
               key={p.name}
-              className="h-[40px] py-[8px] px-[20px] -mx-[12px] flex gap-[8px]"
+              className="min-h-[40px] py-[8px] px-[20px] -mx-[12px] flex gap-[8px] items-center group"
             >
               <Check
                 onChange={() => {}}
                 value={!!tagValue.find((a) => a.id === p.id)}
               />
-              <div
-                className="h-full flex justify-center items-center px-[8px] rounded-[8px]"
-                style={{ backgroundColor: p.color }}
-              >
-                <span className="mix-blend-difference text-[#fff]">
+              <div className="h-full flex items-center flex-1 break-all">
+                <span
+                  className="text-[#fff] px-[8px] rounded-[8px] text-shadow-tags"
+                  style={{ backgroundColor: p.color }}
+                >
                   {p.name}
                 </span>
               </div>
+              {!tagValue.find((a) => a.id === p.id) && (
+                <div
+                  onClick={(e) => deleteTag(p, e)}
+                  className="ms-auto transition-opacity cursor-pointer text-red-500 text-[14px] font-[600]"
+                >
+                  ×
+                </div>
+              )}
             </div>
           ))}
           <div
@@ -181,7 +248,9 @@ export const TagsComponentInner: FC<{
             <div>
               <PlusIcon />
             </div>
-            <div className="text-[13px] font-[600]">{t('add_new_tag', 'Add New Tag')}</div>
+            <div className="text-[13px] font-[600]">
+              {t('add_new_tag', 'Add New Tag')}
+            </div>
           </div>
         </div>
       )}
@@ -197,7 +266,7 @@ const Check: FC<{ value: boolean; onChange: (value: boolean) => void }> = ({
     <div
       onClick={() => onChange(!value)}
       className={clsx(
-        'text-[10px] font-[500] text-center flex border border-btnSimple rounded-[6px] w-[20px] h-[20px] justify-center items-center',
+        'text-[10px] font-[500] text-center flex border border-btnSimple rounded-[6px] min-w-[20px] min-h-[20px] w-[20px] h-[20px] justify-center items-center',
         value && 'bg-[#612BD3]'
       )}
     >
@@ -403,6 +472,45 @@ export const TagsComponentA: FC<{
     </>
   );
 };
+const ConfirmDeleteModal: FC<{
+  tagName: string;
+  close: () => void;
+  resolve: (value: boolean) => void;
+}> = ({ tagName, close, resolve }) => {
+  const t = useT();
+
+  return (
+    <div className="flex flex-col gap-[16px]">
+      <p className="text-[14px]">
+        {t(
+          'confirm_delete_tag',
+          'Are you sure you want to delete the tag "{{tagName}}"?',
+          { tagName }
+        )}
+      </p>
+      <div className="flex gap-[8px] justify-end">
+        <Button
+          onClick={() => {
+            resolve(false);
+            close();
+          }}
+        >
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          onClick={() => {
+            resolve(true);
+            close();
+          }}
+          className="bg-red-500 hover:bg-red-600"
+        >
+          {t('delete', 'Delete')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const ShowModal: FC<{
   tag: string;
   color?: string;

libraries/nestjs-libraries/src/database/prisma/posts/posts.repository.ts

@@ -678,6 +678,7 @@ export class PostsRepository {
     return this._tags.model.tags.findMany({
       where: {
         orgId,
+        deletedAt: null,
       },
     });
   }
@@ -704,6 +705,18 @@ export class PostsRepository {
     });
   }
 
+  deleteTag(id: string, orgId: string) {
+    return this._tags.model.tags.update({
+      where: {
+        id,
+        orgId,
+      },
+      data: {
+        deletedAt: new Date(),
+      },
+    });
+  }
+
   createComment(
     orgId: string,
     userId: string,

libraries/nestjs-libraries/src/database/prisma/posts/posts.service.ts

@@ -841,6 +841,10 @@ export class PostsService {
     return this._postRepository.editTag(id, orgId, body);
   }
 
+  deleteTag(id: string, orgId: string) {
+    return this._postRepository.deleteTag(id, orgId);
+  }
+
   createComment(
     orgId: string,
     userId: string,