wip
This commit is contained in:
parent
5fecd5b6fc
commit
40676af11e
BIN
bin/server
BIN
bin/server
Binary file not shown.
@ -28,7 +28,7 @@ func NewRepository(client database.Client) Repository {
|
||||
}
|
||||
|
||||
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)
|
||||
if err != nil {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"vue": "^3.5.13",
|
||||
"vue-draggable-next": "^2.2.1",
|
||||
"vue-router": "^4.5.0",
|
||||
"vuetify": "^3.7.16",
|
||||
"vuetify": "^3.8.2",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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=="],
|
||||
|
||||
"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=="],
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
"vue": "^3.5.13",
|
||||
"vue-draggable-next": "^2.2.1",
|
||||
"vue-router": "^4.5.0",
|
||||
"vuetify": "^3.7.16"
|
||||
"vuetify": "^3.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
|
||||
38
web/src/components/DynamicMenu.vue
Normal file
38
web/src/components/DynamicMenu.vue
Normal 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
30
web/src/components/FormInput.vue
Normal 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
37
web/src/components/FormTextarea.vue
Normal 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>
|
||||
@ -25,6 +25,13 @@ const disabled = computed(() => !issue.value.name)
|
||||
const addIssue = async () => {
|
||||
const result = await issuesStore.create(issue.value)
|
||||
showForm.value = !result
|
||||
issue.value = {
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
status_id: props.status.id,
|
||||
project_id: 1,
|
||||
position: 0,
|
||||
}
|
||||
}
|
||||
|
||||
function onClickOutside() {
|
||||
@ -35,15 +42,26 @@ function onClickOutside() {
|
||||
<template>
|
||||
<v-list-item rounded :border="showForm">
|
||||
<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-col cols="auto">
|
||||
<v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="auto">
|
||||
<v-btn variant="tonal" class="mr-1" :disabled @click="addIssue">ok</v-btn>
|
||||
<v-btn variant="tonal" @click="showForm = false">cancel</v-btn>
|
||||
<v-btn variant="tonal" icon rounded class="mr-1" :disabled @click="addIssue">
|
||||
<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-row>
|
||||
</v-list-item-title>
|
||||
|
||||
64
web/src/components/IssueItemDetails.vue
Normal file
64
web/src/components/IssueItemDetails.vue
Normal 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>
|
||||
@ -1,36 +1,41 @@
|
||||
<script setup lang="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 router = useRouter()
|
||||
|
||||
const issuesStore = useIssuesStore()
|
||||
const statusesStore = useStatusesStore()
|
||||
|
||||
const menu = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'delete',
|
||||
icon: 'mdi-trash-can',
|
||||
},
|
||||
]
|
||||
const projectKey = computed(() => props.issue.project.key)
|
||||
|
||||
async function onDelete() {
|
||||
await issuesStore.remove(props.issue.id)
|
||||
const onDelete = async (id: number) => await issuesStore.remove(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>
|
||||
|
||||
<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>
|
||||
<v-icon class="handle move" icon="mdi-drag" />
|
||||
<v-icon class="handle cursor-move" icon="mdi-drag" />
|
||||
</template>
|
||||
<v-list-item-subtitle>
|
||||
<div>{{ props.issue.description }}</div>
|
||||
<div class="text-caption">{{ props.issue.description }}</div>
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex ga-2 align-center">
|
||||
<!-- <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>-->
|
||||
<v-chip :text="issue.id" variant="tonal" size="small" label />
|
||||
<div class="text-body-1">{{ props.issue.name }}</div>
|
||||
<!-- <v-chip :text="issue.id" variant="tonal" size="small" label />-->
|
||||
<div class="text-body-2 text-wrap">{{ props.issue.name }}</div>
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
|
||||
@ -39,18 +44,34 @@ async function onDelete() {
|
||||
<v-avatar color="primary" size="28" />
|
||||
<v-menu>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div class="d-flex ga-2 align-center">
|
||||
<v-icon size="small" :icon="item.icon"></v-icon>
|
||||
{{ item.title }}
|
||||
<div>Change status</div>
|
||||
<v-icon icon="mdi-menu-right"></v-icon>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
@ -58,8 +79,4 @@ async function onDelete() {
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.move {
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -12,7 +12,7 @@ const issuesStore = useIssuesStore()
|
||||
|
||||
const selectedId = ref<number>()
|
||||
|
||||
const height = 400
|
||||
const height = 600
|
||||
|
||||
async function onChange(val: {
|
||||
added: { element: Issue; newIndex: number }
|
||||
@ -37,20 +37,20 @@ function onChoose() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-sheet rounded>
|
||||
<v-sheet rounded elevation="1" width="18rem">
|
||||
<v-toolbar density="compact">
|
||||
<v-toolbar-title>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<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>
|
||||
</v-toolbar-title>
|
||||
<template #append>
|
||||
<v-menu>
|
||||
<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-chip>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list density="compact" class="mt-1">
|
||||
@ -89,12 +89,4 @@ function onChoose() {
|
||||
.sortable-drag {
|
||||
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>
|
||||
|
||||
66
web/src/components/ProjectCreateFlow.vue
Normal file
66
web/src/components/ProjectCreateFlow.vue
Normal 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
40
web/src/components/StatusMenu.vue
Normal 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>
|
||||
@ -1,24 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const component = ref<string>('issues')
|
||||
|
||||
const menu = ['stat', 'issues', 'projects', 'tests']
|
||||
|
||||
function setComponent(value: string) {
|
||||
component.value = value
|
||||
}
|
||||
const route = useRoute()
|
||||
const menu = [
|
||||
{ id: 1, title: 'Projects' },
|
||||
// { id: 2, title: 'issues' },
|
||||
// { id: 3, title: 'stat' },
|
||||
// { id: 4, title: 'test' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-layout>
|
||||
<v-app-bar density="compact" elevation="1">
|
||||
<v-app-bar-title>Application - component: {{ component }}</v-app-bar-title>
|
||||
<v-btn v-for="(el, index) in menu" :key="index" @click="setComponent(el)">{{ el }}</v-btn>
|
||||
<v-app-bar density="comfortable" elevation="1">
|
||||
<template v-slot:prepend>
|
||||
<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-main>
|
||||
<v-container :fluid="true">
|
||||
<slot name="default" :component="component"></slot>
|
||||
<slot></slot>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
|
||||
@ -32,7 +32,7 @@ const vuetify = createVuetify({
|
||||
VRow: { dense: true },
|
||||
VSheet: { border: true, rounded: true },
|
||||
VList: { density: 'compact' },
|
||||
VCard: { variant: 'outlined' },
|
||||
// VCard: { variant: 'outlined' },
|
||||
VChip: { density: 'compact', variant: 'outlined', label: true },
|
||||
VNumberInput: { hideDetails: true, variant: 'outlined', density: 'compact' },
|
||||
VBtn: { variant: 'tonal', density: 'compact' },
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import TestRootView from '@/views/TestRootView.vue'
|
||||
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
@ -12,17 +11,25 @@ const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
path: '',
|
||||
redirect: '/projects',
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
component: HomeView,
|
||||
children: [
|
||||
{ path: '', component: () => import('@/views/ProjectRootView.vue') },
|
||||
{
|
||||
path: '/',
|
||||
name: 'items',
|
||||
component: TestRootView,
|
||||
path: ':key/issues',
|
||||
name: 'issues',
|
||||
component: () => import('@/views/IssuesRootView.vue'),
|
||||
props: (route) => ({ selectedIssue: route.query.selectedIssue }),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
router.beforeResolve((to, from) => {})
|
||||
|
||||
export default router
|
||||
|
||||
@ -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 }
|
||||
})
|
||||
@ -25,6 +25,7 @@ export interface PositionsDto {
|
||||
|
||||
export const useIssuesStore = defineStore('issues', () => {
|
||||
const issues = ref<Issue[]>([])
|
||||
const selectedIssue = ref<Issue>()
|
||||
const issuesObj = ref<Map<number, Issue[]>>(new Map())
|
||||
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,7 +9,7 @@ export interface Project {
|
||||
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 const useProjectsStore = defineStore('projects', () => {
|
||||
@ -27,8 +27,11 @@ export const useProjectsStore = defineStore('projects', () => {
|
||||
if (response?.data) project.value = response.data
|
||||
}
|
||||
|
||||
async function create({ name, description }: CreateProjectDto) {
|
||||
const response = await POST<Project>({ body: { name, description } })
|
||||
async function create({ name, description, key }: CreateProjectDto) {
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
12
web/src/stores/server.ts
Normal file
12
web/src/stores/server.ts
Normal 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
28
web/src/types.ts
Normal 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
7
web/src/views/ExampleRootView.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>Foo Bar</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -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>
|
||||
`,
|
||||
}
|
||||
@ -1,12 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { type Component, computed, onMounted, watchEffect } from 'vue'
|
||||
import { computed, watchEffect } from 'vue'
|
||||
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 { useStatusesStore } from '@/stores/statuses.ts'
|
||||
import { useProjectsStore } from '@/stores/projects.ts'
|
||||
@ -22,34 +16,17 @@ const layout = computed(() => {
|
||||
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 statusesStore.findAll())
|
||||
watchEffect(async () => await issuesStore.findAll())
|
||||
|
||||
onMounted(async () => {
|
||||
// await projectsStore.findById(122)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<default-layout>
|
||||
<template v-slot:default="{ component }">
|
||||
<component :is="components[component]" />
|
||||
<hello-world />
|
||||
</template>
|
||||
</default-layout>
|
||||
<!-- <component :is="layout">-->
|
||||
<!-- <router-view v-slot="{ Component, route }">-->
|
||||
<!-- <div :key="route.name">-->
|
||||
<!-- <component :is="Component" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </router-view>-->
|
||||
<!-- </component>-->
|
||||
<component :is="layout">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<div :key="route.name">
|
||||
<component :is="Component" />
|
||||
</div>
|
||||
</router-view>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
@ -1,43 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, watchEffect } from 'vue'
|
||||
import { computed, ref, watchEffect } from 'vue'
|
||||
import { useIssuesStore } from '@/stores/issues.ts'
|
||||
import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
|
||||
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 statusesStore = useStatusesStore()
|
||||
const projectsStore = useProjectsStore()
|
||||
const router = useRouter()
|
||||
|
||||
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) {
|
||||
return issuesStore.issuesObj.get(statusId) ?? []
|
||||
}
|
||||
|
||||
function showLog() {
|
||||
console.log('issue obj', issuesStore.issuesObj)
|
||||
const dialog = ref(false)
|
||||
|
||||
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(() => {
|
||||
issuesStore.genIssuesObj(statuses.value)
|
||||
})
|
||||
function deleteProject() {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col cols="3" align="center">
|
||||
<v-text-field hide-details label="search" prepend-inner-icon="mdi-magnify" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn icon="mdi-circle" size="default" density="comfortable" @click="showLog"></v-btn>
|
||||
<v-col cols="auto">
|
||||
<router-link to="/projects" class="text-black text-decoration-underline text-body-1 cursor-pointer">
|
||||
Projects
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="statuses.length">
|
||||
<v-col :cols="cols" v-for="status in statuses" :key="status.id">
|
||||
<v-row>
|
||||
<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)" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,19 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useProjectsStore } from '@/stores/projects.ts'
|
||||
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 { 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 () => {})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="project in projects" :key="project.id">
|
||||
{{ project.name }} - {{ project.description }} - {{ project.key }}
|
||||
<div class="d-flex align-center justify-space-between mb-4">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user