feat: Add a better gui for the issue edition

src/components/global/Table/Table.astro

@@ -22,27 +22,21 @@ delete props.data
 
 <style>
 	table {
-		@apply flex w-full flex-col border rounded-lg overflow-clip
+		@apply w-full flex-col rounded-lg overflow-clip
 	}
 	table :global(th) {
 		@apply font-medium
 	}
-	table :global(thead),
-	table :global(tbody),
-	table :global(tr) {
-		@apply flex justify-between
-	}
-	table :global(thead),
-	table :global(tbody) {
-		@apply flex-col
-	}
-	table :global(th),
-	table :global(td) {
-		@apply block w-full py-2 px-4 text-right
-	}
 	table :global(tr) {
 		@apply border-gray-200
 	}
+	table :global(tbody) :global(tr) {
+		@apply border-l border-r border-white
+	}
+	table :global(td),
+	table :global(th) {
+		@apply p-3
+	}
 	table :global(thead) {
 		@apply bg-gray-100 border-b border-gray-200 text-black
 	}

src/pages/projects/[id].astro

@@ -6,7 +6,7 @@ import route from 'route'
 import Input from 'components/global/Input.astro'
 import Table from 'components/global/Table/Table.astro'
 import Select from 'components/global/Select/index.astro'
-import { X } from 'lucide-astro'
+import { EllipsisVertical, X } from 'lucide-astro'
 import { Sort } from 'models/Query'
 import type { StateObj } from 'models/State'
 import Priority, { getPriorities, getPriorityText } from 'models/Priority'
@@ -39,13 +39,11 @@ if (!project) {
 }
 
 const dbStates = await DaoFactory.get('state').findAll({ project: project.id, $sort: { preset: Sort.DESC } })
-console.log(dbStates)
 const states = dbStates.data.length > 0 ? dbStates.data : defaultStates
-console.log(project, states)
 ---
 
 <MainLayout>
-	<main class="container flex gap-24 justify-center items-center md:mt-6">
+	<main class="container gap-24 md:mt-6">
 		<!-- <div class="w-1/3">
 			<Input
 				name="displayID"
@@ -55,17 +53,17 @@ console.log(project, states)
 				data-output="run:reload"
 			/>
 		</div> -->
-		<div class="w-1/2">
 			<h1 class="text-6xl text-center font-bold">{project.name}</h1>
 			<Select data-trigger="change" data-output="hyp:tbody[data-input]" name="sort" options={[{value: 'localid', title: 'ID'}, {value: 'state', title: 'State'}]} />
-			<Table>
+			<Table class="table-fixed">
 				<thead>
 					<tr>
-						<th>id</th>
+						<th class="w-1/12">id</th>
-						<th>name</th>
+						<th class="w-1/12">Type</th>
-						<th>state</th>
+						<th class="w-6/12">name</th>
-						<th>Priority</th>
+						<th class="w-1/12">state</th>
-						<th>Labels</th>
+						<th class="w-1/12">Priority</th>
+						<th class="w-2/12">Labels</th>
 					</tr>
 				</thead>
 				<tbody
@@ -83,6 +81,7 @@ console.log(project, states)
 					data-attribute="data-id:{id}"
 				>
 					<td data-attribute={`${project.displayid}-{localid}`}></td>
+					<td></td>
 					<td data-attribute="name"></td>
 					<td data-attribute="state.name"></td>
 					<td data-attribute="priority"></td>
@@ -95,20 +94,31 @@ console.log(project, states)
 					</td>
 				</tr>
 			</template>
+
 			<form data-input={`post:${route('/api/v1/projects/[id]/issues', {id: project.id})}`} data-output="hyp:tbody[data-input]">
 				<Input name="name" label="Ajouter une Issue" placeholder="nom de la tache" />
 				<Button>Ajouter</Button>
 			</form>
+			<div class="absolute top-0 bg-gray-100 dark:bg-gray-900 h-screen z-20 2xl:w-5/12 xl:w-1/2 md:w-2/3 w-full transition-[right] 2xl:-right-5/12 xl:-right-1/2 md:-right-2/3 -right-full has-[#issue-details>form]:right-0">
+				<div class="flex gap-4 justify-end px-4 pt-4">
+
+					<EllipsisVertical class="cursor-pointer" />
+					<X class="issue-close cursor-pointer" />
 				</div>
-		<div class="w-1/2">
 				<div id="issue-details"></div>
+			</div>
+
 			<template id="issueTemplate">
 				<form
-					data-trigger="keyup pointerup after:250"
+					data-trigger="keyup after:250"
 					data-input={`post:${route('/api/v1/projects/[id]/issues/[issueId]', {id: project.id, issueId: '{id}'}, true)}`}
 					data-output="hyp:tbody[data-input]"
-					class="flex flex-col gap-5"
+					class="flex flex-col gap-5 px-6 py-2"
 				>
+					<p>
+						<span data-attribute={`${project.displayid}-{localid}`}></span>
+						<span class="text-2xl" data-attribute="name"></span>
+					</p>
 					<Input data-attribute="value:name" name="name" />
 					<Input type="textarea" name="description" data-attribute="description"></Input>
 
@@ -137,8 +147,37 @@ console.log(project, states)
 						</ul>
 					</div>
 
+					<p class="pl-2 text-lg text-center">History</p>
+					<ul class="border-l flex flex-col gap-2">
+						<li class="py-2 px-4 bg-white dark:bg-gray-800 rounded-xl mb-2 mx-2">
+							<p class="flex justify-between">
+								<span>Username</span>
+								<span>2024-06-09 14:45:58</span>
+							</p>
+							<p class="italic">changed state from "Todo" to "WIP"</p>
+						</li>
+
+						<li class="py-2 px-4 border-2 border-gray-50 rounded-xl mb-2 mx-2">
+								<p class="font-bold flex justify-between">
+									<span>Username</span>
+									<span>2024-06-09 14:45:58</span>
+								</p>
+								<p>Il faudrait voir pour changer la valeur de l'élément, cela fait un peu chelou dans l'état actuel...</p>
+							</li>
+					</ul>
+					<Input type="textarea" label="Commentaire" />
+
 				</form>
 			</template>
-		</div>
 	</main>
 </MainLayout>
+
+<script>
+	const x = document.querySelector('.issue-close')
+	const details = document.querySelector('#issue-details')
+	x?.addEventListener('click', () => {
+		while (details?.firstElementChild) {
+			details?.firstElementChild.remove()
+		}
+	})
+</script>