avior/project-manager
1
0
Fork 0
generated from avior/template-web-astro
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: Add a better gui for the issue edition

Browse Source
This commit is contained in:
Florian Bouillon 2024-10-03 00:34:31 +02:00
parent d8ad16608e
commit 7fa18d682d
2 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/global/Table/Table.astro
View File

@ -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
}

73
src/pages/projects/[id].astro
View File

@ -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>name</th>
<th>state</th>
<th>Priority</th>
<th>Labels</th>
<th class="w-1/12">id</th>
<th class="w-1/12">Type</th>
<th class="w-6/12">name</th>
<th class="w-1/12">state</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>
<div class="w-1/2">
<div id="issue-details"></div>
<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 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>