UI improve stack page (#102)

* feat(front): delete a stack * ui(front): improve some ui element on stack page * refacto(front): generalize modal
RomainDreidemy · Sep 8, 2023 · 8830021 · 8830021
1 parent a288a19
commit 8830021
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 89 deletions.
diff --git a/front/src/services/entities/Stack.entity.ts b/front/src/services/entities/Stack.entity.ts
@@ -9,7 +9,7 @@ const StackEntity = {
   board: async (id: string): Promise<AxiosResponse<IBoard>> => await axios.get(`/stacks/${id}/board`),
   create: async (stack: IStackCreate): Promise<AxiosResponse<IStack>> => await axios.post('/stacks', stack),
   update: async (stack: IStack): Promise<AxiosResponse<IStack>> => await axios.put(`/stacks/${stack.id}`, stack),
-  delete: async (stack: IStack): Promise<AxiosResponse> => await axios.delete(`/stacks/${stack.id}`)
+  delete: async (id: string): Promise<AxiosResponse> => await axios.delete(`/stacks/${id}`)
 }
 
 export default StackEntity
diff --git a/front/src/views/organisms/ComposeFileModal.organism.tsx b/front/src/views/organisms/ComposeFileModal.organism.tsx
@@ -1,21 +1,16 @@
 import React, { type ReactElement } from 'react'
+import ModalOrganism from './Modal.organism'
 
 interface ComposeFileModalOrganismProps {
+  toggle: () => void
   composeFileData: string
 }
 
-const ComposeFileModalOrganism = ({ composeFileData }: ComposeFileModalOrganismProps): ReactElement => {
+const ComposeFileModalOrganism = ({ toggle, composeFileData }: ComposeFileModalOrganismProps): ReactElement => {
   return (
-    <dialog id="compose_file_modal" className="modal">
-      <div className="modal-box">
+    <ModalOrganism toggle={toggle}>
         <textarea className="h-96 w-full" readOnly defaultValue={composeFileData} />
-        <div className="modal-action">
-          <form method="dialog">
-            <button className="btn">Close</button>
-          </form>
-        </div>
-      </div>
-    </dialog>
+    </ModalOrganism>
   )
 }
 

diff --git a/front/src/views/organisms/Manager.organism.tsx b/front/src/views/organisms/Manager.organism.tsx
@@ -5,10 +5,12 @@ import useDrawerManager from '../../hooks/useDrawerManager'
 import Button from '../atoms/forms/Button.atom'
 import BoardEntity from '../../services/entities/Board.entity'
 import ComposeFileModalOrganism from './ComposeFileModal.organism'
+import useToggle from '../../hooks/useToggle'
 
 const ManagerOrganism = ({ stackId }: { stackId: string }): JSX.Element => {
   const { createEntityAndDraw, loading } = useDrawerManager(stackId)
-  const [composeFileData, setComposeFileData] = useState<string>()
+  const [composeFileData, setComposeFileData] = useState<string>('')
+  const [open, toggle] = useToggle()
 
   const createService = async (): Promise<void> => {
     await createEntityAndDraw(DrawerTypes.SERVICE)
@@ -20,8 +22,12 @@ const ManagerOrganism = ({ stackId }: { stackId: string }): JSX.Element => {
     await createEntityAndDraw(DrawerTypes.VOLUME)
   }
 
+  const openModal = (): void => {
+    toggle()
+  }
+
   const generateYaml = async (): Promise<void> => {
-    window.compose_file_modal.showModal()
+    openModal()
     try {
       const { data: yaml } = await BoardEntity.generateComposeFile(stackId)
       setComposeFileData(yaml)
@@ -42,11 +48,11 @@ const ManagerOrganism = ({ stackId }: { stackId: string }): JSX.Element => {
         <EntityButtonAtom name="Network" onClick={createNetwork} disabled={loading}/>
         <EntityButtonAtom name="Volume" onClick={createVolume} disabled={loading}/>
 
-        <div className='justify-self-end'>
-          <Button label={'Generate yaml file'} variant="primary" onClick={async () => { await generateYaml() }}/>
+        <div className='mt-auto mb-4 flex justify-center'>
+          <Button label={'Generate yaml file'} className='w-auto' variant='ghost' onClick={async () => { await generateYaml() }}/>
         </div>
 
-        <ComposeFileModalOrganism composeFileData={composeFileData} />
+        {open && <ComposeFileModalOrganism composeFileData={composeFileData} toggle={toggle} />}
     </div>
   )
 }

diff --git a/front/src/views/organisms/Modal.organism.tsx b/front/src/views/organisms/Modal.organism.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Button from '../atoms/forms/Button.atom'
+
+const ModalOrganism = ({ children, toggle, onSubmit, buttonText }: {
+  children: React.ReactNode
+  toggle: () => void
+  onSubmit?: () => void
+  buttonText?: string
+}): JSX.Element => {
+  return (
+    <>
+      <div
+        className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+      >
+        <div className="relative w-96 my-6 mx-auto max-w-3xl">
+          {/* content */}
+          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+            {/* header */}
+            <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+              <h3 className="text-3xl font-semibold">
+                Create a new stack
+              </h3>
+            </div>
+            {children}
+            <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+              { (onSubmit != null) &&
+                <Button
+                  label={buttonText}
+                  onClick={onSubmit}
+                  direction={'right'}
+                />
+              }
+
+              <Button className='btn-ghost ml-4' onClick={toggle} label={'Close'} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+    </>
+  )
+}
+
+export default ModalOrganism
diff --git a/front/src/views/organisms/StackCard.organism.tsx b/front/src/views/organisms/StackCard.organism.tsx
@@ -2,26 +2,29 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { type IStack } from '../../interfaces/Stack.interface'
 import Button from '../atoms/forms/Button.atom'
+import { BiTrash, BiEdit } from 'react-icons/bi'
 
-const StackCardOrganism = ({ stack, id, name, description, onEdit }: {
+const StackCardOrganism = ({ stack, id, name, description, onEdit, onDelete }: {
   stack: IStack
-  id: number
+  id: string
   name: string
   description: string
   onEdit: (stack: IStack) => void
+  onDelete: (id: string) => void
 }): JSX.Element => {
   return (
     <div className="card shadow-md mb-2 rounded border border-blue-100 hover:border-blue-200">
-      <div className="card-body">
-        <h2 className="card-title">{name}</h2>
-        <p className="truncate">{description}</p>
-      </div>
-
       <Link to={`/stacks/${id}`} key={id}>
-        <Button label="View" variant="ghost" />
+        <div className="card-body">
+          <h2 className="card-title">{name}</h2>
+          <p className="truncate">{description}</p>
+        </div>
       </Link>
+      <div className="card-actions justify-end">
+        <Button className="btn-ghost" icon={<BiTrash/>} onClick={() => { onDelete(id) }} />
 
-      <Button label="Edit" variant="ghost" onClick={() => { onEdit(stack) }} />
+        <Button className="btn-ghost" icon={<BiEdit/>} onClick={() => { onEdit(stack) }} />
+      </div>
     </div>
   )
 }

diff --git a/front/src/views/organisms/StackFormModal.organism.tsx b/front/src/views/organisms/StackFormModal.organism.tsx
@@ -1,11 +1,11 @@
 import React, { type Dispatch, type SetStateAction, useState } from 'react'
 import { type IStack, type IStackCreate, STACK_STRUCTURE } from '../../interfaces/Stack.interface'
-import Button from '../atoms/forms/Button.atom'
 import Input from '../atoms/forms/Input.atom'
 import StackEntity from '../../services/entities/Stack.entity'
 import useForm from '../../hooks/useForm'
 import { type EditorForm } from '../../forms/editor.structure'
 import TextArea from '../atoms/forms/TextArea.atom'
+import ModalOrganism from './Modal.organism'
 
 const StackFormModalOrganism = ({ stack, stacks, setStacks, toggle }: {
   toggle: () => void
@@ -38,75 +38,34 @@ const StackFormModalOrganism = ({ stack, stacks, setStacks, toggle }: {
     toggle()
   }
 
-  const onDelete = async (): Promise<void> => {
-    if (isCreating) return
-
-    console.log(stackEntityForm)
-    await StackEntity.delete(stackEntityForm as IStack)
-
-    const filtered: IStack[] = stacks.filter(s => s.id !== stack.id)
-
-    setStacks(filtered)
-  }
-
   const buttonText =
     isCreating
       ? 'Create stack +'
       : 'Edit'
 
   return (
-    <>
-      <div
-        className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
-      >
-        <div className="relative w-96 my-6 mx-auto max-w-3xl">
-          {/* content */}
-          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-            {/* header */}
-            <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-              <h3 className="text-3xl font-semibold">
-                Create a new stack
-              </h3>
-            </div>
-            {/* body */}
-            <div className="relative p-6 flex-auto">
-              <form>
-                <Input
-                  label="Name"
-                  type="text"
-                  name="name"
-                  className='mb-4'
-                  onChange={onChange}
-                />
-
-                <TextArea
-                  label="Description"
-                  type="textarea"
-                  name="description"
-                  className='h-32'
-                  onChange={onChange}
-                />
-              </form>
-            </div>
-            <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
-              <Button
-                label={buttonText}
-                onClick={onSubmit}
-                direction={'right'}
-              />
-
-              {!isCreating && (<Button
-                label={'Delete'}
-                onClick={onDelete}
-                direction={'left'}
-              />)}
-              <Button className='btn-ghost ml-4' onClick={toggle} label={'Close'} />
-            </div>
-          </div>
-        </div>
+    <ModalOrganism toggle={toggle} onSubmit={onSubmit} buttonText={buttonText}>
+      <div className="relative p-6 flex-auto">
+        <form>
+          <Input
+            label="Name"
+            type="text"
+            name="name"
+            className='mb-4'
+            onChange={onChange}
+          />
+
+          <TextArea
+            label="Description"
+            type="textarea"
+            name="description"
+            className='h-32'
+            onChange={onChange}
+          />
+        </form>
       </div>
-      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
-    </>
+    </ModalOrganism>
+
   )
 }
 

diff --git a/front/src/views/pages/StacksPage.tsx b/front/src/views/pages/StacksPage.tsx
@@ -34,6 +34,11 @@ const StacksPage = (): JSX.Element => {
     openModal()
   }
 
+  const onDelete = async (id: string): Promise<void> => {
+    await StackEntity.delete(id)
+    await getStacks()
+  }
+
   return (
     <section>
       <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 p-5'>
@@ -47,7 +52,7 @@ const StacksPage = (): JSX.Element => {
         </button>
         {
           (stacks.map((stack: IStack) => (
-            <StackCardOrganism key={stack.id} stack={stack} id={stack.id} name={stack.name} description={stack.description} onEdit={onEdit} />
+            <StackCardOrganism key={stack.id} stack={stack} id={stack.id.toString()} name={stack.name} description={stack.description} onEdit={onEdit} onDelete={onDelete} />
           )))
         }
       </div>