change(ui): projects revamtp (wip)

frontend/app/components/Client/Projects/ProjectList.tsx

@@ -10,7 +10,6 @@ function ProjectList() {
   const list = projectsStore.list;
   const [search, setSearch] = React.useState('');
   const config = projectsStore.config;
-  console.log('config', config.pid);
 
   const onSearch = (value: string) => {
     setSearch(value);
@@ -21,16 +20,15 @@ function ProjectList() {
   };
 
   return (
-    <div>
+    <div className="flex flex-col gap-4">
       <Input.Search placeholder="Search" onSearch={onSearch} />
-      <div className="my-3" />
       <List
         dataSource={list.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))}
         renderItem={(item: Project) => (
           <List.Item
             key={item.id}
             onClick={() => onProjectClick(item)}
-            className={`!py-2 mb-2 rounded-lg cursor-pointer !border-b-0 ${config.pid == item.projectId ? 'bg-teal-light' : 'bg-white'}`}
+            className={`!py-2 mb-2 rounded-lg cursor-pointer !border-b-0 ${config.project?.projectId === item.projectId ? 'bg-teal-light' : 'bg-white'}`}
           >
             <List.Item.Meta
               className="flex !items-center px-2 overflow-hidden"

frontend/app/components/Client/Projects/ProjectTags.tsx

@@ -52,11 +52,11 @@ function ProjectTags() {
             />
           </List.Item>
         )}
-        pagination={{
-          pageSize: 5,
-          showSizeChanger: false,
-          size: 'small'
-        }}
+        // pagination={{
+        //   pageSize: 5,
+        //   showSizeChanger: false,
+        //   size: 'small'
+        // }}
       />
     </div>
   );

frontend/app/components/Client/Projects/Projects.tsx

@@ -7,11 +7,14 @@ import { useStore } from '@/mstore';
 import { observer } from 'mobx-react-lite';
 import { PlusIcon } from 'lucide-react';
 import ProjectTabContent from 'Components/Client/Projects/ProjectTabContent';
+import NewSiteForm from 'Components/Client/Sites/NewSiteForm';
+import { useModal } from 'Components/ModalContext';
 
 function Projects() {
   const { projectsStore } = useStore();
   const history = useHistory();
   const { project, pid, tab } = projectsStore.config;
+  const { openModal, closeModal } = useModal();
 
   React.useEffect(() => {
     const params = new URLSearchParams(history.location.search);
@@ -33,6 +36,12 @@ function Projects() {
     history.push({ search: params.toString() });
   }, [pid, tab]);
 
+  const createProject = () => {
+    openModal(<NewSiteForm onClose={closeModal} />, {
+      title: 'New Project'
+    });
+  };
+
   return (
     <Card
       title="Projects"
@@ -43,8 +52,9 @@ function Projects() {
       style={{ height: 'calc(100vh - 140px)' }}
       extra={
         <Space>
-          <Button type="primary" onClick={() => projectsStore.setConfigProject(undefined)} icon={<PlusIcon />}>Create
-            Project</Button>
+          <Button type="primary" onClick={createProject} icon={<PlusIcon />}>
+            Create Project
+          </Button>
         </Space>
       }
     >

frontend/app/components/Client/Projects/TagForm.tsx

@@ -31,8 +31,11 @@ function TagForm(props: Props) {
     });
   };
 
-  const onSave = () => {
-    void tagWatchStore.updateTagName(tag.tagId, name, projectId);
+  const onSave = async () => {
+    setLoading(true);
+    tagWatchStore.updateTagName(tag.tagId, name, projectId).finally(() => {
+      setLoading(false);
+    });
   };
 
   return (
@@ -52,7 +55,7 @@ function TagForm(props: Props) {
         <Space>
           <Button
             onClick={onSave}
-            disabled={name.length === 0}
+            disabled={name.length === 0 || name === tag.name || loading}
             loading={loading}
             type="primary"
             className="float-left mr-2"