vadim/board
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Vadim 2025-05-10 21:13:42 +03:00
parent 5fecd5b6fc
commit 40676af11e
28 changed files with 633 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bin/server
View File

Binary file not shown.

2
internal/repository/status/status.go
View File

@ -28,7 +28,7 @@ func NewRepository(client database.Client) Repository {
} }
func (r *repository) Find(ctx context.Context) ([]*status.Status, error) { func (r *repository) Find(ctx context.Context) ([]*status.Status, error) {
query := "select id, name, description, position from statuses order by id asc" query := "select id, name, description, position from statuses order by position asc"
rows, err := r.client.Query(ctx, query) rows, err := r.client.Query(ctx, query)
if err != nil { if err != nil {

4
web/bun.lock
View File

@ -11,7 +11,7 @@
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-draggable-next": "^2.2.1", "vue-draggable-next": "^2.2.1",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vuetify": "^3.7.16", "vuetify": "^3.8.2",
}, },
"devDependencies": { "devDependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
@ -803,7 +803,7 @@
"vue-tsc": ["vue-tsc@2.2.8", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.8" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ=="], "vue-tsc": ["vue-tsc@2.2.8", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.8" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ=="],
"vuetify": ["vuetify@3.7.16", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=1.0.0", "vue": "^3.3.0", "webpack-plugin-vuetify": ">=2.0.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-Few/cBtgJYgdkzi0LWmVy67G5uc2+q7oWcadbcTUPAtEtGYNh2AM28h01Fk+ScJgfxkA077//ZDff1rh3jYG/w=="], "vuetify": ["vuetify@3.8.2", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=2.1.0", "vue": "^3.5.0", "webpack-plugin-vuetify": ">=3.1.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-UJNFP4egmKJTQ3V3MKOq+7vIUKO7/Fko5G6yUsOW2Rm0VNBvAjgO6VY6EnK3DTqEKN6ugVXDEPw37NQSTGLZvw=="],
"which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="], "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],

1
web/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

2
web/package.json
View File

@ -20,7 +20,7 @@
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-draggable-next": "^2.2.1", "vue-draggable-next": "^2.2.1",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vuetify": "^3.7.16" "vuetify": "^3.8.2"
}, },
"devDependencies": { "devDependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",

38
web/src/components/DynamicMenu.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import type { DynamicMenuElement } from '@/types.ts'
const componentProps = defineProps<{
menu: DynamicMenuElement[]
itemId?: number
isHovering?: boolean | null
}>()
</script>
<template>
<v-menu v-bind="componentProps" width="200">
<template v-slot:activator="{ props }">
<v-btn icon rounded :variant="componentProps.isHovering ? 'tonal' : 'text'" v-bind="props">
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
</template>
<v-list density="compact" class="mt-1">
<template v-for="el in componentProps.menu" :key="el.id">
<v-divider class="my-1" v-if="el.type === 'divider'"></v-divider>
<v-list-item
:disabled="el.disabled"
v-else
:color="el.color"
@click="el.click && el.click(componentProps.itemId)"
>
<v-list-item-title>
<v-icon class="mr-2" :color="el.color" :icon="el.icon"></v-icon>
<span>{{ el.title }}</span>
</v-list-item-title>
</v-list-item>
</template>
</v-list>
</v-menu>
</template>
<style scoped lang="scss"></style>

30
web/src/components/FormInput.vue Normal file
View File

@ -0,0 +1,30 @@
<script setup lang="ts">
const value = defineModel('value')
const props = defineProps<{
label?: string
required?: boolean
description?: string
width?: '0' | '25' | '50' | '100'
}>()
</script>
<template>
<div>
<div v-if="props.label" class="d-flex align-end ga-2">
<div>
<span>{{ props.label }}</span>
<span v-if="props.required" class="text-error">*</span>
</div>
<span v-if="props.description" class="text-caption">{{ props.description }}</span>
</div>
<v-text-field
v-model:model-value="value"
:class="`w-${props.width ?? 100}`"
hide-details
:placeholder="props.label"
></v-text-field>
</div>
</template>
<style scoped lang="scss"></style>

37
web/src/components/FormTextarea.vue Normal file
View File

@ -0,0 +1,37 @@
<script setup lang="ts">
const value = defineModel('value')
const props = withDefaults(
defineProps<{
label?: string
required?: boolean
description?: string
width?: '0' | '25' | '50' | '100'
rows?: number
}>(),
{
rows: 5,
},
)
</script>
<template>
<div>
<div v-if="props.label" class="d-flex align-end ga-2">
<div>
<span>{{ props.label }}</span>
<span v-if="props.required" class="text-error">*</span>
</div>
<span v-if="props.description" class="text-caption">{{ props.description }}</span>
</div>
<v-textarea
v-model:model-value="value"
:class="`w-${props.width ?? 100}`"
hide-details
:rows="props.rows"
:placeholder="props.label"
></v-textarea>
</div>
</template>
<style scoped lang="scss"></style>

24
web/src/components/IssueCreateForm.vue
View File

@ -25,6 +25,13 @@ const disabled = computed(() => !issue.value.name)
const addIssue = async () => { const addIssue = async () => {
const result = await issuesStore.create(issue.value) const result = await issuesStore.create(issue.value)
showForm.value = !result showForm.value = !result
issue.value = {
name: undefined,
description: undefined,
status_id: props.status.id,
project_id: 1,
position: 0,
}
} }
function onClickOutside() { function onClickOutside() {
@ -35,15 +42,26 @@ function onClickOutside() {
<template> <template>
<v-list-item rounded :border="showForm"> <v-list-item rounded :border="showForm">
<v-list-item-title v-if="showForm" v-click-outside="onClickOutside"> <v-list-item-title v-if="showForm" v-click-outside="onClickOutside">
<v-text-field hide-details placeholder="title" variant="plain" v-model:model-value="issue.name"></v-text-field> <v-text-field
hide-details
placeholder="title"
variant="plain"
clearable
@keydown.enter="addIssue"
v-model:model-value="issue.name"
></v-text-field>
<v-row align="end"> <v-row align="end">
<v-col cols="auto"> <v-col cols="auto">
<v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select> <v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select>
</v-col> </v-col>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-col cols="auto"> <v-col cols="auto">
<v-btn variant="tonal" class="mr-1" :disabled @click="addIssue">ok</v-btn> <v-btn variant="tonal" icon rounded class="mr-1" :disabled @click="addIssue">
<v-btn variant="tonal" @click="showForm = false">cancel</v-btn> <v-icon icon="mdi-check"></v-icon>
</v-btn>
<v-btn variant="tonal" icon rounded @click="showForm = false">
<v-icon icon="mdi-cancel"></v-icon>
</v-btn>
</v-col> </v-col>
</v-row> </v-row>
</v-list-item-title> </v-list-item-title>

64
web/src/components/IssueItemDetails.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
// const isActive = defineModel<boolean>('isActive', { required: false })
import type { Issue } from '@/stores/issues.ts'
import { computed } from 'vue'
import StatusMenu from '@/components/StatusMenu.vue'
const props = defineProps<{ selectedIssue: Issue }>()
const emit = defineEmits<{
(e: 'onCancel'): void
}>()
const created = computed(() => {
return props.selectedIssue.created ? new Date(props.selectedIssue.created).toLocaleString('ru-RU') : undefined
})
const issueId = computed(() => {
return props.selectedIssue.project.key + '-' + props.selectedIssue.id
})
</script>
<template>
<v-card max-width="900" min-width="700">
<template #append>
<div class="d-flex ga-2">
<v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-dots-horizontal"></v-btn>
<v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-close"></v-btn>
</div>
</template>
<template #title>
<div class="text-body-1">{{ issueId }}</div>
</template>
<v-card-text>
<v-row>
<v-col class="d-flex flex-column ga-2">
<div class="text-h5">{{ props.selectedIssue.name }}</div>
<div>
<div>description</div>
<div>{{ props.selectedIssue.description ?? 'add description' }}</div>
</div>
<div>
<v-textarea rows="3"></v-textarea>
<v-btn variant="flat" color="primary">save</v-btn>
<v-btn variant="text">cancel</v-btn>
</div>
</v-col>
<v-col cols="5" class="d-flex flex-column ga-2 align-start">
<status-menu class="" :status="props.selectedIssue.status"></status-menu>
<v-sheet class="pa-4 w-100">
<div>
assignee:
<v-avatar size="x-small" text="M" color="success"></v-avatar>
</div>
</v-sheet>
<div class="text-caption">created: {{ created }}</div>
<!-- <div>{{ props.selectedIssue.project }}</div>-->
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<style scoped lang="scss"></style>

63
web/src/components/IssueListItem.vue
View File

@ -1,36 +1,41 @@
<script setup lang="ts"> <script setup lang="ts">
import { type Issue, useIssuesStore } from '@/stores/issues.ts' import { type Issue, useIssuesStore } from '@/stores/issues.ts'
import { useStatusesStore } from '@/stores/statuses.ts'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
const props = defineProps<{ issue: Issue }>() const props = defineProps<{ issue: Issue }>()
const router = useRouter()
const issuesStore = useIssuesStore() const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore()
const menu = [ const projectKey = computed(() => props.issue.project.key)
{
id: 1,
title: 'delete',
icon: 'mdi-trash-can',
},
]
async function onDelete() { const onDelete = async (id: number) => await issuesStore.remove(id)
await issuesStore.remove(props.issue.id)
function onStatusChange(statusId: number) {
console.log('on change status', statusId)
}
function onClick(id: number) {
console.log('on click', id)
router.push({ name: 'issues', query: { selectedIssue: `${projectKey.value}-${id}` } })
} }
</script> </script>
<template> <template>
<v-list-item rounded border class="mb-1"> <v-list-item rounded border class="mb-1 pl-2" @click="onClick(props.issue.id)">
<template v-slot:prepend> <template v-slot:prepend>
<v-icon class="handle move" icon="mdi-drag" /> <v-icon class="handle cursor-move" icon="mdi-drag" />
</template> </template>
<v-list-item-subtitle> <v-list-item-subtitle>
<div>{{ props.issue.description }}</div> <div class="text-caption">{{ props.issue.description }}</div>
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-title> <v-list-item-title>
<div class="d-flex ga-2 align-center"> <div class="d-flex ga-2 align-center">
<!-- <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>--> <!-- <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>-->
<v-chip :text="issue.id" variant="tonal" size="small" label /> <!-- <v-chip :text="issue.id" variant="tonal" size="small" label />-->
<div class="text-body-1">{{ props.issue.name }}</div> <div class="text-body-2 text-wrap">{{ props.issue.name }}</div>
</div> </div>
</v-list-item-title> </v-list-item-title>
@ -39,27 +44,39 @@ async function onDelete() {
<v-avatar color="primary" size="28" /> <v-avatar color="primary" size="28" />
<v-menu> <v-menu>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn size="small" icon="mdi-menu" variant="plain" v-bind="props" /> <v-btn icon rounded variant="text" v-bind="props">
<v-icon size="small">mdi-menu</v-icon>
</v-btn>
</template> </template>
<v-list density="compact" class="mt-1"> <v-list density="compact" class="mt-1">
<v-list-item v-for="item in menu" :key="item.id" :value="item.title" @click="onDelete"> <v-list-item link>
<v-list-item-title> <v-list-item-title>
<div class="d-flex ga-2 align-center"> <div class="d-flex ga-2 align-center">
<v-icon size="small" :icon="item.icon"></v-icon> <div>Change status</div>
{{ item.title }} <v-icon icon="mdi-menu-right"></v-icon>
</div> </div>
</v-list-item-title> </v-list-item-title>
<v-menu v-if="statusesStore.statuses" :open-on-focus="false" activator="parent" open-on-hover submenu>
<v-list>
<v-list-item
v-for="status in statusesStore.statuses"
:key="status.id"
link
@click="onStatusChange(status.id)"
:title="status.name"
>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-list-item>
<v-divider class="my-1"></v-divider>
<v-list-item link @click="onDelete(props.issue.id)" title="Delete"></v-list-item>
</v-list>
</v-menu>
</v-list-item-action> </v-list-item-action>
</template> </template>
</v-list-item> </v-list-item>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.move {
cursor: move;
}
</style>

18
web/src/components/IssuesByStatusList.vue
View File

@ -12,7 +12,7 @@ const issuesStore = useIssuesStore()
const selectedId = ref<number>() const selectedId = ref<number>()
const height = 400 const height = 600
async function onChange(val: { async function onChange(val: {
added: { element: Issue; newIndex: number } added: { element: Issue; newIndex: number }
@ -37,20 +37,20 @@ function onChoose() {
</script> </script>
<template> <template>
<v-sheet rounded> <v-sheet rounded elevation="1" width="18rem">
<v-toolbar density="compact"> <v-toolbar density="compact">
<v-toolbar-title> <v-toolbar-title>
<div class="d-flex align-center ga-2"> <div class="d-flex align-center ga-2">
<div class="text-uppercase text-body-2">{{ props.status.name }}</div> <div class="text-uppercase text-body-2">{{ props.status.name }}</div>
<v-chip size="small" variant="tonal" :text="props.issues.length" class="mr-2" /> <v-chip variant="tonal" :text="props.issues.length" class="mr-2" />
</div> </div>
</v-toolbar-title> </v-toolbar-title>
<template #append> <template #append>
<v-menu> <v-menu>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-chip label variant="text" v-bind="props"> <v-btn icon rounded density="compact" variant="text" v-bind="props">
<v-icon icon="mdi-dots-horizontal"></v-icon> <v-icon icon="mdi-dots-horizontal"></v-icon>
</v-chip> </v-btn>
</template> </template>
<v-list density="compact" class="mt-1"> <v-list density="compact" class="mt-1">
@ -89,12 +89,4 @@ function onChoose() {
.sortable-drag { .sortable-drag {
background-color: rgb(var(--v-theme-background)); background-color: rgb(var(--v-theme-background));
} }
.animation {
animation: wave 0.5s linear;
}
@keyframes wave {
50% {
background-color: rgba(var(--v-theme-primary), 0.2);
}
}
</style> </style>

66
web/src/components/ProjectCreateFlow.vue Normal file
View File

@ -0,0 +1,66 @@
<script setup lang="ts">
import FormInput from '@/components/FormInput.vue'
import { ref } from 'vue'
import FormTextarea from '@/components/FormTextarea.vue'
import { useProjectsStore } from '@/stores/projects.ts'
const dialog = defineModel('dialog')
const projectsStore = useProjectsStore()
const name = ref('')
const description = ref('')
const key = ref('')
async function onSubmit() {
console.log(name.value)
await projectsStore.create({
name: name.value,
description: description.value,
key: key.value,
})
}
</script>
<template>
<v-sheet border class="pa-4">
<div class="d-flex align-center ga-4 mb-4">
<v-btn variant="text" @click="dialog = false" icon="mdi-close"></v-btn>
</div>
<div class="mb-4">
<div class="text-h6">Project type</div>
<v-list lines="two">
<v-list-item border rounded @click="console.log('Kanban')">
<div class="d-flex ga-2">
<div class="d-flex align-center">
<v-icon size="64" color="primary">mdi-paper-roll-outline</v-icon>
</div>
<div>
<div class="text-h6">Kanban</div>
<div class="text-body-2">
Kanban is all about helping teams visualize their work, limit work currently in progress, and maximize
efficiency.
</div>
</div>
</div>
</v-list-item>
</v-list>
</div>
<div class="mb-4">
<div class="text-h6">Project details</div>
<div class="text-caption">
Required fields are marked with an asterisk <span class="text-error text-body-2">*</span>
</div>
</div>
<v-form class="d-flex flex-column ga-4" @submit.prevent="onSubmit">
<form-input v-model:value="name" label="Name" :required="true" />
<form-input v-model:value="key" label="Key" :required="true" description="prefix for your project" width="50" />
<form-textarea v-model:value="description" label="Description" :rows="2" />
<v-btn type="submit" class="align-self-start" variant="flat" density="comfortable" color="primary">create</v-btn>
</v-form>
</v-sheet>
</template>
<style scoped lang="scss"></style>

40
web/src/components/StatusMenu.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup lang="ts">
import { type Status, useStatusesStore } from '@/stores/statuses.ts'
import { ref, watchEffect } from 'vue'
const statusesStore = useStatusesStore()
const props = defineProps<{ status?: Status }>()
const selected = ref<Status>()
watchEffect(() => props.status && setSelected(props.status))
function setSelected(status: Status) {
selected.value = status
}
function onSelect(status: Status) {
console.log(status)
selected.value = status
}
</script>
<template>
<v-menu width="200">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" color="primary">{{ selected?.name }} </v-btn>
</template>
<v-list density="compact" class="mt-1">
<template v-for="el in statusesStore.statuses" :key="el.id">
<v-list-item @click="onSelect(el)">
<v-list-item-title>
<span>{{ el.name }}</span>
</v-list-item-title>
</v-list-item>
</template>
</v-list>
</v-menu>
</template>
<style scoped lang="scss"></style>

39
web/src/layouts/DefaultLayout.vue
View File

@ -1,24 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { useRoute, useRouter } from 'vue-router'
const component = ref<string>('issues') const route = useRoute()
const menu = [
const menu = ['stat', 'issues', 'projects', 'tests'] { id: 1, title: 'Projects' },
// { id: 2, title: 'issues' },
function setComponent(value: string) { // { id: 3, title: 'stat' },
component.value = value // { id: 4, title: 'test' },
} ]
</script> </script>
<template> <template>
<v-layout> <v-layout>
<v-app-bar density="compact" elevation="1"> <v-app-bar density="comfortable" elevation="1">
<v-app-bar-title>Application - component: {{ component }}</v-app-bar-title> <template v-slot:prepend>
<v-btn v-for="(el, index) in menu" :key="index" @click="setComponent(el)">{{ el }}</v-btn> <v-menu>
<template v-slot:activator="{ props }">
<v-app-bar-nav-icon variant="text" v-bind="props"></v-app-bar-nav-icon>
</template>
<v-list class="mt-1" width="200">
<v-list-item v-for="(item, index) in menu" :key="index" :to="`/${item.title}`">
<v-list-item-title class="d-flex align-center ga-4">
<v-avatar border size="24" rounded color="primary"> </v-avatar>
<div>{{ item.title }}</div>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<v-app-bar-title>Application</v-app-bar-title>
</v-app-bar> </v-app-bar>
<v-main> <v-main>
<v-container :fluid="true"> <v-container :fluid="true">
<slot name="default" :component="component"></slot> <slot></slot>
</v-container> </v-container>
</v-main> </v-main>
</v-layout> </v-layout>

2
web/src/main.ts
View File

@ -32,7 +32,7 @@ const vuetify = createVuetify({
VRow: { dense: true }, VRow: { dense: true },
VSheet: { border: true, rounded: true }, VSheet: { border: true, rounded: true },
VList: { density: 'compact' }, VList: { density: 'compact' },
VCard: { variant: 'outlined' }, // VCard: { variant: 'outlined' },
VChip: { density: 'compact', variant: 'outlined', label: true }, VChip: { density: 'compact', variant: 'outlined', label: true },
VNumberInput: { hideDetails: true, variant: 'outlined', density: 'compact' }, VNumberInput: { hideDetails: true, variant: 'outlined', density: 'compact' },
VBtn: { variant: 'tonal', density: 'compact' }, VBtn: { variant: 'tonal', density: 'compact' },

17
web/src/router/index.ts
View File

@ -1,6 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
import TestRootView from '@/views/TestRootView.vue'
declare module 'vue-router' { declare module 'vue-router' {
interface RouteMeta { interface RouteMeta {
@ -12,17 +11,25 @@ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: '/', path: '',
redirect: '/projects',
},
{
path: '/projects',
component: HomeView, component: HomeView,
children: [ children: [
{ path: '', component: () => import('@/views/ProjectRootView.vue') },
{ {
path: '/', path: ':key/issues',
name: 'items', name: 'issues',
component: TestRootView, component: () => import('@/views/IssuesRootView.vue'),
props: (route) => ({ selectedIssue: route.query.selectedIssue }),
}, },
], ],
}, },
], ],
}) })
router.beforeResolve((to, from) => {})
export default router export default router

12
web/src/stores/components.ts
View File

@ -1,12 +0,0 @@
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
export const useComponentsStore = defineStore('components', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

10
web/src/stores/issues.ts
View File

@ -25,6 +25,7 @@ export interface PositionsDto {
export const useIssuesStore = defineStore('issues', () => { export const useIssuesStore = defineStore('issues', () => {
const issues = ref<Issue[]>([]) const issues = ref<Issue[]>([])
const selectedIssue = ref<Issue>()
const issuesObj = ref<Map<number, Issue[]>>(new Map()) const issuesObj = ref<Map<number, Issue[]>>(new Map())
const { GET, POST, DELETE } = useFetch('/api/issues') const { GET, POST, DELETE } = useFetch('/api/issues')
@ -69,5 +70,12 @@ export const useIssuesStore = defineStore('issues', () => {
} }
} }
return { issues, issuesObj, findAll, create, genIssuesObj, updatePositions, remove } async function findById(id: number) {
const response = await GET<Issue>({ param: id })
if (response?.data) {
selectedIssue.value = response.data
}
}
return { issues, issuesObj, selectedIssue, findAll, findById, create, genIssuesObj, updatePositions, remove }
}) })

9
web/src/stores/projects.ts
View File

@ -9,7 +9,7 @@ export interface Project {
key: string key: string
} }
export type CreateProjectDto = Partial<Pick<Project, 'name' | 'description'>> export type CreateProjectDto = Partial<Omit<Project, 'id'>>
export type UpdateProjectDto = Partial<Pick<Project, 'id' | 'name' | 'description'>> export type UpdateProjectDto = Partial<Pick<Project, 'id' | 'name' | 'description'>>
export const useProjectsStore = defineStore('projects', () => { export const useProjectsStore = defineStore('projects', () => {
@ -27,8 +27,11 @@ export const useProjectsStore = defineStore('projects', () => {
if (response?.data) project.value = response.data if (response?.data) project.value = response.data
} }
async function create({ name, description }: CreateProjectDto) { async function create({ name, description, key }: CreateProjectDto) {
const response = await POST<Project>({ body: { name, description } }) if (!name || !key) {
throw new Error('Project name and key is required')
}
const response = await POST<Project>({ body: { name, description, key } })
if (response?.data) projects.value.push(response.data) if (response?.data) projects.value.push(response.data)
} }

12
web/src/stores/server.ts Normal file
View File

@ -0,0 +1,12 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useServerStore = defineStore('server', () => {
const isOnline = ref(false)
function checkOnline() {
console.log('check online')
}
return { isOnline, checkOnline }
})

28
web/src/types.ts Normal file
View File

@ -0,0 +1,28 @@
export interface DynamicMenuElement {
id: number
title?: string
icon?: string
color?: string
type?: 'divider'
disabled?: boolean
click?: (val?: number) => void
}
export interface IssueMenu {
id: number
name: string
click?: (id: number) => void
children?: { id: number; name: string; click?: (id: number) => void }[]
}
export interface TableHeader {
readonly key?: (string & {}) | 'data-table-group' | 'data-table-select' | 'data-table-expand' | undefined
readonly title?: string | undefined
readonly fixed?: boolean | undefined
readonly align?: 'start' | 'end' | 'center' | undefined
readonly width?: string | number | undefined
readonly minWidth?: string | number | undefined
readonly maxWidth?: string | number | undefined
readonly nowrap?: boolean | undefined
readonly sortable?: boolean | undefined
}

7
web/src/views/ExampleRootView.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div>Foo Bar</div>
</template>
<style scoped lang="scss"></style>

20
web/src/views/HelloWorld.ts
View File

@ -1,20 +0,0 @@
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function click() {
count.value = count.value + 1
}
return {
count,
click,
}
},
template: `
<div class="d-flex ga-2 pa-2">
<div class="hello">COUNT: {{count}}</div>
<v-btn @click="click">click</v-btn>
</div>
`,
}

39
web/src/views/HomeView.vue
View File

@ -1,12 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { type Component, computed, onMounted, watchEffect } from 'vue' import { computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import TestRootView from '@/views/TestRootView.vue'
import StatRootView from '@/views/StatRootView.vue'
import HelloWorld from '@/views/HelloWorld.js'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import IssuesRootView from '@/views/IssuesRootView.vue'
import ProjectRootView from '@/views/ProjectRootView.vue'
import { useIssuesStore } from '@/stores/issues.ts' import { useIssuesStore } from '@/stores/issues.ts'
import { useStatusesStore } from '@/stores/statuses.ts' import { useStatusesStore } from '@/stores/statuses.ts'
import { useProjectsStore } from '@/stores/projects.ts' import { useProjectsStore } from '@/stores/projects.ts'
@ -22,34 +16,17 @@ const layout = computed(() => {
return layout ? `${layout}Layout` : 'DefaultLayout' return layout ? `${layout}Layout` : 'DefaultLayout'
}) })
const components: { [key: string]: Component } = {
stat: StatRootView,
projects: ProjectRootView,
issues: IssuesRootView,
tests: TestRootView,
}
watchEffect(async () => await projectsStore.findAll()) watchEffect(async () => await projectsStore.findAll())
watchEffect(async () => await statusesStore.findAll()) watchEffect(async () => await statusesStore.findAll())
watchEffect(async () => await issuesStore.findAll()) watchEffect(async () => await issuesStore.findAll())
onMounted(async () => {
// await projectsStore.findById(122)
})
</script> </script>
<template> <template>
<default-layout> <component :is="layout">
<template v-slot:default="{ component }"> <router-view v-slot="{ Component, route }">
<component :is="components[component]" /> <div :key="route.name">
<hello-world /> <component :is="Component" />
</template> </div>
</default-layout> </router-view>
<!-- <component :is="layout">--> </component>
<!-- <router-view v-slot="{ Component, route }">-->
<!-- <div :key="route.name">-->
<!-- <component :is="Component" />-->
<!-- </div>-->
<!-- </router-view>-->
<!-- </component>-->
</template> </template>

116
web/src/views/IssuesRootView.vue
View File

@ -1,43 +1,127 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, watchEffect } from 'vue' import { computed, ref, watchEffect } from 'vue'
import { useIssuesStore } from '@/stores/issues.ts' import { useIssuesStore } from '@/stores/issues.ts'
import IssuesByStatusView from '@/components/IssuesByStatusList.vue' import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
import { useStatusesStore } from '@/stores/statuses.ts' import { useStatusesStore } from '@/stores/statuses.ts'
import { useProjectsStore } from '@/stores/projects.ts'
import type { DynamicMenuElement } from '@/types.ts'
import DynamicMenu from '@/components/DynamicMenu.vue'
import { useRouter } from 'vue-router'
import IssueItemDetails from '@/components/IssueItemDetails.vue'
const issuesStore = useIssuesStore() const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore() const statusesStore = useStatusesStore()
const projectsStore = useProjectsStore()
const router = useRouter()
const statuses = computed(() => statusesStore.statuses) const statuses = computed(() => statusesStore.statuses)
const cols = computed(() => (statuses.value.length > 0 ? 12 / statuses.value.length : 12)) const props = defineProps<{ selectedIssue?: string }>()
function getIssues(statusId: number) { function getIssues(statusId: number) {
return issuesStore.issuesObj.get(statusId) ?? [] return issuesStore.issuesObj.get(statusId) ?? []
} }
function showLog() { const dialog = ref(false)
console.log('issue obj', issuesStore.issuesObj)
const items = [
{
id: 1,
title: 'bla',
},
]
const projectMenu: DynamicMenuElement[] = [
{
id: 1,
title: 'Add people',
icon: 'mdi-account',
disabled: true,
click: projectSettings,
},
{
id: 2,
title: 'Settings',
icon: 'mdi-cog',
click: projectSettings,
},
{ id: 3, type: 'divider' },
{
id: 4,
title: 'Delete',
icon: 'mdi-trash-can',
color: 'error',
click: deleteProject,
},
]
async function findById(val?: string) {
if (!val) return
const id = +val.split('-')[1]
await issuesStore.findById(id)
if (issuesStore.selectedIssue) dialog.value = true
} }
watchEffect(() => { function deleteProject() {
issuesStore.genIssuesObj(statuses.value) console.log('blat')
}) }
function projectSettings() {
console.log('blat2')
}
function onCancel() {
router.push({ name: 'issues' })
dialog.value = false
}
watchEffect(async () => await findById(props.selectedIssue))
watchEffect(() => issuesStore.genIssuesObj(statuses.value))
</script> </script>
<template> <template>
<div> <div>
<v-row> <v-row>
<v-col cols="3" align="center"> <v-col cols="auto">
<v-text-field hide-details label="search" prepend-inner-icon="mdi-magnify" /> <router-link to="/projects" class="text-black text-decoration-underline text-body-1 cursor-pointer">
</v-col> Projects
<v-col> </router-link>
<v-btn icon="mdi-circle" size="default" density="comfortable" @click="showLog"></v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="statuses.length"> <v-row>
<v-col :cols="cols" v-for="status in statuses" :key="status.id"> <v-col cols="auto">
<v-hover v-slot="{ isHovering, props }">
<div v-bind="props" class="d-flex ga-2 align-center mb-4">
<v-avatar size="28" color="primary" border rounded></v-avatar>
<div class="text-h5 text-capitalize">{{ projectsStore.projects[0]?.name }}</div>
<dynamic-menu v-bind="props" :isHovering="isHovering" :menu="projectMenu"></dynamic-menu>
</div>
</v-hover>
</v-col>
</v-row>
<div class="d-flex ga-2 mb-4">
<v-text-field max-width="15rem" hide-details label="search" prepend-inner-icon="mdi-magnify" />
<v-select max-width="10rem" hide-details :items></v-select>
<v-btn class="mx-2" icon>
<v-avatar icon="mdi-account-outline" color="grey-lighten-4"></v-avatar>
</v-btn>
</div>
<div v-if="statuses.length" class="d-flex ga-2 my-2 overflow-x-auto">
<div v-for="status in statuses" :key="status.id">
<issues-by-status-view :status="status" :issues="getIssues(status.id)" /> <issues-by-status-view :status="status" :issues="getIssues(status.id)" />
</v-col> </div>
</v-row> <v-btn variant="tonal" icon rounded size="small" density="default">
<v-icon size="default">mdi-plus</v-icon>
</v-btn>
</div>
<v-dialog v-model="dialog" width="auto" @after-leave="onCancel">
<issue-item-details
v-if="issuesStore.selectedIssue"
@on-cancel="onCancel"
:selected-issue="issuesStore.selectedIssue"
/>
</v-dialog>
</div> </div>
</template> </template>

79
web/src/views/ProjectRootView.vue
View File

@ -1,19 +1,92 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { onMounted, ref } from 'vue'
import { useProjectsStore } from '@/stores/projects.ts' import { useProjectsStore } from '@/stores/projects.ts'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import DynamicMenu from '@/components/DynamicMenu.vue'
import type { DynamicMenuElement, TableHeader } from '@/types.ts'
import ProjectCreateFlow from '@/components/ProjectCreateFlow.vue'
const projectsStore = useProjectsStore() const projectsStore = useProjectsStore()
const { projects } = storeToRefs(projectsStore) const { projects } = storeToRefs(projectsStore)
const headers: TableHeader[] = [
{ title: 'Name', key: 'name', width: 400 },
{ title: 'Key', key: 'key' },
{ title: 'Actions', key: 'actions', width: 100, align: 'end', sortable: false },
]
const menu: DynamicMenuElement[] = [
{
id: 1,
title: 'settings',
icon: 'mdi-cog',
click: projectSettings,
},
{
id: 2,
type: 'divider',
},
{
id: 3,
title: 'delete',
icon: 'mdi-trash-can',
color: 'error',
click: deleteProject,
},
]
const dialog = ref(false)
function projectSettings(id?: number) {
console.log('d', id)
}
async function deleteProject(id?: number) {
console.log('p', id)
if (id) await projectsStore.remove(id)
}
onMounted(async () => {}) onMounted(async () => {})
</script> </script>
<template> <template>
<div> <div>
<div v-for="project in projects" :key="project.id"> <div class="d-flex align-center justify-space-between mb-4">
{{ project.name }} - {{ project.description }} - {{ project.key }} <div class="text-h5 font-weight-bold">Projects</div>
<v-dialog transition="dialog-bottom-transition" max-width="500" v-model="dialog">
<template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" density="comfortable" variant="flat" color="primary">
<span class="text-body-2">Create project</span>
</v-btn>
</template>
<project-create-flow v-model:dialog="dialog"></project-create-flow>
</v-dialog>
</div> </div>
<div class="d-flex ga-4 w-100 w-md-25">
<v-text-field :disabled="true" prepend-inner-icon="mdi-magnify" placeholder="search projects"></v-text-field>
</div>
<v-data-table :headers hover hide-default-footer class="border rounded" density="compact" :items="projects">
<template #[`item.name`]="{ item }">
<div class="d-flex ga-2">
<v-avatar color="primary" border rounded size="25"></v-avatar>
<v-hover v-slot="{ isHovering, props }">
<router-link
v-bind="props"
class="text-primary text-body-1"
:class="{ 'text-decoration-none': !isHovering }"
:to="`/projects/${item.key}/issues`"
>
{{ item.name }}
</router-link>
</v-hover>
</div>
</template>
<template #[`item.actions`]="{ item }">
<span>{{ item.id }}</span>
<dynamic-menu :menu :item-id="item.id"></dynamic-menu>
</template>
</v-data-table>
</div> </div>
</template> </template>

1
web/vite.config.ts
View File

@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
server: { server: {
host: '0.0.0.0',
proxy: { proxy: {
'/api': 'http://localhost:3000', '/api': 'http://localhost:3000',
}, },