fix(views): lint
This commit is contained in:
parent
30b41bd143
commit
4b903c4f48
@ -11,6 +11,7 @@
|
|||||||
<div class="switch-view">
|
<div class="switch-view">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
v-for="v in views"
|
v-for="v in views"
|
||||||
|
:key="v.id"
|
||||||
class="switch-view-button"
|
class="switch-view-button"
|
||||||
:class="{'is-active': v.id === viewId}"
|
:class="{'is-active': v.id === viewId}"
|
||||||
:to="{ name: 'project.view', params: { projectId, viewId: v.id } }"
|
:to="{ name: 'project.view', params: { projectId, viewId: v.id } }"
|
||||||
@ -18,7 +19,7 @@
|
|||||||
{{ getViewTitle(v) }}
|
{{ getViewTitle(v) }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
<slot name="header"/>
|
<slot name="header" />
|
||||||
</div>
|
</div>
|
||||||
<CustomTransition name="fade">
|
<CustomTransition name="fade">
|
||||||
<Message
|
<Message
|
||||||
@ -30,7 +31,7 @@
|
|||||||
</Message>
|
</Message>
|
||||||
</CustomTransition>
|
</CustomTransition>
|
||||||
|
|
||||||
<slot v-if="loadedProjectId"/>
|
<slot v-if="loadedProjectId" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -109,7 +110,7 @@ watch(
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.debug(`Loading project, $route.params =`, route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
|
console.debug('Loading project, $route.params =', route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
|
||||||
|
|
||||||
// Set the current project to the one we're about to load so that the title is already shown at the top
|
// Set the current project to the one we're about to load so that the title is already shown at the top
|
||||||
loadedProjectId.value = 0
|
loadedProjectId.value = 0
|
||||||
|
@ -21,11 +21,8 @@ import {
|
|||||||
LABEL_FIELDS,
|
LABEL_FIELDS,
|
||||||
} from '@/helpers/filters'
|
} from '@/helpers/filters'
|
||||||
import {useDebounceFn} from '@vueuse/core'
|
import {useDebounceFn} from '@vueuse/core'
|
||||||
import {useI18n} from 'vue-i18n'
|
|
||||||
import {createRandomID} from '@/helpers/randomId'
|
import {createRandomID} from '@/helpers/randomId'
|
||||||
|
|
||||||
const {t} = useI18n()
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
modelValue,
|
modelValue,
|
||||||
projectId,
|
projectId,
|
||||||
@ -270,9 +267,9 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
|
|||||||
>
|
>
|
||||||
<div class="control filter-input">
|
<div class="control filter-input">
|
||||||
<textarea
|
<textarea
|
||||||
|
:id
|
||||||
ref="filterInput"
|
ref="filterInput"
|
||||||
v-model="filterQuery"
|
v-model="filterQuery"
|
||||||
:id
|
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<ProjectWrapper
|
<ProjectWrapper
|
||||||
class="project-kanban"
|
class="project-kanban"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<ProjectWrapper
|
<ProjectWrapper
|
||||||
class="project-list"
|
class="project-list"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
@ -73,7 +73,7 @@
|
|||||||
>
|
>
|
||||||
<template v-if="canWrite">
|
<template v-if="canWrite">
|
||||||
<span class="icon handle">
|
<span class="icon handle">
|
||||||
<icon icon="grip-lines"/>
|
<icon icon="grip-lines" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</SingleTaskInProject>
|
</SingleTaskInProject>
|
||||||
@ -114,7 +114,6 @@ import type {ITask} from '@/modelTypes/ITask'
|
|||||||
import {isSavedFilter} from '@/services/savedFilter'
|
import {isSavedFilter} from '@/services/savedFilter'
|
||||||
|
|
||||||
import {useBaseStore} from '@/stores/base'
|
import {useBaseStore} from '@/stores/base'
|
||||||
import {useTaskStore} from '@/stores/tasks'
|
|
||||||
|
|
||||||
import type {IProject} from '@/modelTypes/IProject'
|
import type {IProject} from '@/modelTypes/IProject'
|
||||||
import type {IProjectView} from '@/modelTypes/IProjectView'
|
import type {IProjectView} from '@/modelTypes/IProjectView'
|
||||||
@ -189,7 +188,6 @@ const firstNewPosition = computed(() => {
|
|||||||
return calculateItemPosition(null, tasks.value[0].position)
|
return calculateItemPosition(null, tasks.value[0].position)
|
||||||
})
|
})
|
||||||
|
|
||||||
const taskStore = useTaskStore()
|
|
||||||
const baseStore = useBaseStore()
|
const baseStore = useBaseStore()
|
||||||
const project = computed(() => baseStore.currentProject)
|
const project = computed(() => baseStore.currentProject)
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<ProjectWrapper
|
<ProjectWrapper
|
||||||
class="project-table"
|
class="project-table"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
|
@ -117,11 +117,14 @@ function validateTitle() {
|
|||||||
class="is-danger"
|
class="is-danger"
|
||||||
@click.prevent="() => model.bucketConfiguration.splice(index, 1)"
|
@click.prevent="() => model.bucketConfiguration.splice(index, 1)"
|
||||||
>
|
>
|
||||||
<icon icon="trash-alt"/>
|
<icon icon="trash-alt" />
|
||||||
</button>
|
</button>
|
||||||
<div class="filter-bucket-form">
|
<div class="filter-bucket-form">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label" :for="'bucket_'+index+'_title'">
|
<label
|
||||||
|
class="label"
|
||||||
|
:for="'bucket_'+index+'_title'"
|
||||||
|
>
|
||||||
{{ $t('project.views.title') }}
|
{{ $t('project.views.title') }}
|
||||||
</label>
|
</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
@ -136,18 +139,18 @@ function validateTitle() {
|
|||||||
|
|
||||||
<FilterInput
|
<FilterInput
|
||||||
v-model="model.bucketConfiguration[index].filter"
|
v-model="model.bucketConfiguration[index].filter"
|
||||||
:inputLabel="$t('project.views.filter')"
|
:input-label="$t('project.views.filter')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="is-flex is-justify-content-end">
|
<div class="is-flex is-justify-content-end">
|
||||||
<x-button
|
<XButton
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
icon="plus"
|
icon="plus"
|
||||||
@click="() => model.bucketConfiguration.push({title: '', filter: ''})"
|
@click="() => model.bucketConfiguration.push({title: '', filter: ''})"
|
||||||
>
|
>
|
||||||
{{ $t('project.kanban.addBucket') }}
|
{{ $t('project.kanban.addBucket') }}
|
||||||
</x-button>
|
</XButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,7 +58,7 @@ const SORT_BY_DEFAULT: SortBy = {
|
|||||||
export function useTaskList(
|
export function useTaskList(
|
||||||
projectIdGetter: ComputedGetter<IProject['id']>,
|
projectIdGetter: ComputedGetter<IProject['id']>,
|
||||||
projectViewIdGetter: ComputedGetter<IProjectView['id']>,
|
projectViewIdGetter: ComputedGetter<IProjectView['id']>,
|
||||||
sortByDefault: SortBy = SORT_BY_DEFAULT
|
sortByDefault: SortBy = SORT_BY_DEFAULT,
|
||||||
) {
|
) {
|
||||||
|
|
||||||
const projectId = computed(() => projectIdGetter())
|
const projectId = computed(() => projectIdGetter())
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import type { RouteRecordName } from 'vue-router'
|
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
|
|
||||||
import type {IProject} from '@/modelTypes/IProject'
|
import type {IProject} from '@/modelTypes/IProject'
|
||||||
|
@ -3,8 +3,6 @@ import {acceptHMRUpdate, defineStore} from 'pinia'
|
|||||||
import {klona} from 'klona/lite'
|
import {klona} from 'klona/lite'
|
||||||
|
|
||||||
import {findById, findIndexById} from '@/helpers/utils'
|
import {findById, findIndexById} from '@/helpers/utils'
|
||||||
import {i18n} from '@/i18n'
|
|
||||||
import {success} from '@/message'
|
|
||||||
|
|
||||||
import BucketService from '@/services/bucket'
|
import BucketService from '@/services/bucket'
|
||||||
import TaskCollectionService, {type TaskFilterParams} from '@/services/taskCollection'
|
import TaskCollectionService, {type TaskFilterParams} from '@/services/taskCollection'
|
||||||
|
@ -28,9 +28,8 @@ import {useKanbanStore} from '@/stores/kanban'
|
|||||||
import {useBaseStore} from '@/stores/base'
|
import {useBaseStore} from '@/stores/base'
|
||||||
import ProjectUserService from '@/services/projectUsers'
|
import ProjectUserService from '@/services/projectUsers'
|
||||||
import {useAuthStore} from '@/stores/auth'
|
import {useAuthStore} from '@/stores/auth'
|
||||||
import TaskCollectionService, {type TaskFilterParams} from '@/services/taskCollection'
|
import {type TaskFilterParams} from '@/services/taskCollection'
|
||||||
import {getRandomColorHex} from '@/helpers/color/randomColor'
|
import {getRandomColorHex} from '@/helpers/color/randomColor'
|
||||||
import type {IProjectView} from '@/modelTypes/IProjectView'
|
|
||||||
|
|
||||||
interface MatchedAssignee extends IUser {
|
interface MatchedAssignee extends IUser {
|
||||||
match: string,
|
match: string,
|
||||||
|
@ -31,6 +31,7 @@ watch(
|
|||||||
if (viewId === 0) {
|
if (viewId === 0) {
|
||||||
// Ideally, we would do that in the router redirect, but we the projects (and therefore, the views)
|
// Ideally, we would do that in the router redirect, but we the projects (and therefore, the views)
|
||||||
// are not always loaded then.
|
// are not always loaded then.
|
||||||
|
console.log('views', projectId, projectStore.projects)
|
||||||
const viewId = projectStore.projects[projectId].views[0].id
|
const viewId = projectStore.projects[projectId].views[0].id
|
||||||
router.replace({
|
router.replace({
|
||||||
name: 'project.view',
|
name: 'project.view',
|
||||||
@ -51,25 +52,21 @@ const route = useRoute()
|
|||||||
<ProjectList
|
<ProjectList
|
||||||
v-if="currentView?.viewKind === 'list'"
|
v-if="currentView?.viewKind === 'list'"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
/>
|
/>
|
||||||
<ProjectGantt
|
<ProjectGantt
|
||||||
v-if="currentView?.viewKind === 'gantt'"
|
v-if="currentView?.viewKind === 'gantt'"
|
||||||
:route
|
:route
|
||||||
:viewId
|
:view-id
|
||||||
/>
|
/>
|
||||||
<ProjectTable
|
<ProjectTable
|
||||||
v-if="currentView?.viewKind === 'table'"
|
v-if="currentView?.viewKind === 'table'"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
/>
|
/>
|
||||||
<ProjectKanban
|
<ProjectKanban
|
||||||
v-if="currentView?.viewKind === 'kanban'"
|
v-if="currentView?.viewKind === 'kanban'"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:viewId
|
:view-id
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
@ -90,12 +90,12 @@ async function saveView() {
|
|||||||
class="mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<div class="is-flex is-justify-content-end">
|
<div class="is-flex is-justify-content-end">
|
||||||
<x-button
|
<XButton
|
||||||
@click="createView"
|
|
||||||
:loading="projectViewService.loading"
|
:loading="projectViewService.loading"
|
||||||
|
@click="createView"
|
||||||
>
|
>
|
||||||
{{ $t('project.views.create') }}
|
{{ $t('project.views.create') }}
|
||||||
</x-button>
|
</XButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table
|
<table
|
||||||
@ -103,59 +103,61 @@ async function saveView() {
|
|||||||
class="table has-actions is-striped is-hoverable is-fullwidth"
|
class="table has-actions is-striped is-hoverable is-fullwidth"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{{ $t('project.views.title') }}</th>
|
<th>{{ $t('project.views.title') }}</th>
|
||||||
<th>{{ $t('project.views.kind') }}</th>
|
<th>{{ $t('project.views.kind') }}</th>
|
||||||
<th class="has-text-right">{{ $t('project.views.actions') }}</th>
|
<th class="has-text-right">
|
||||||
</tr>
|
{{ $t('project.views.actions') }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr
|
<tr
|
||||||
v-for="v in views"
|
v-for="v in views"
|
||||||
:key="v.id"
|
:key="v.id"
|
||||||
>
|
>
|
||||||
<template v-if="viewToEdit !== null && viewToEdit.id === v.id">
|
<template v-if="viewToEdit !== null && viewToEdit.id === v.id">
|
||||||
<td colspan="3">
|
<td colspan="3">
|
||||||
<ViewEditForm
|
<ViewEditForm
|
||||||
v-model="viewToEdit"
|
v-model="viewToEdit"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<div class="is-flex is-justify-content-end">
|
<div class="is-flex is-justify-content-end">
|
||||||
<x-button
|
<XButton
|
||||||
variant="tertiary"
|
variant="tertiary"
|
||||||
@click="viewToEdit = null"
|
class="mr-2"
|
||||||
class="mr-2"
|
@click="viewToEdit = null"
|
||||||
>
|
>
|
||||||
{{ $t('misc.cancel') }}
|
{{ $t('misc.cancel') }}
|
||||||
</x-button>
|
</XButton>
|
||||||
<x-button
|
<XButton
|
||||||
@click="saveView"
|
:loading="projectViewService.loading"
|
||||||
:loading="projectViewService.loading"
|
@click="saveView"
|
||||||
>
|
>
|
||||||
{{ $t('misc.save') }}
|
{{ $t('misc.save') }}
|
||||||
</x-button>
|
</XButton>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<td>{{ v.title }}</td>
|
<td>{{ v.title }}</td>
|
||||||
<td>{{ v.viewKind }}</td>
|
<td>{{ v.viewKind }}</td>
|
||||||
<td class="has-text-right">
|
<td class="has-text-right">
|
||||||
<x-button
|
<XButton
|
||||||
class="is-danger mr-2"
|
class="is-danger mr-2"
|
||||||
icon="trash-alt"
|
icon="trash-alt"
|
||||||
@click="() => {
|
@click="() => {
|
||||||
viewIdToDelete = v.id
|
viewIdToDelete = v.id
|
||||||
showDeleteModal = true
|
showDeleteModal = true
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<x-button
|
<XButton
|
||||||
icon="pen"
|
icon="pen"
|
||||||
@click="viewToEdit = {...v}"
|
@click="viewToEdit = {...v}"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</CreateEdit>
|
</CreateEdit>
|
||||||
@ -174,7 +176,3 @@ async function saveView() {
|
|||||||
</template>
|
</template>
|
||||||
</modal>
|
</modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
@ -109,7 +109,7 @@ function useAuth() {
|
|||||||
name: 'project.view',
|
name: 'project.view',
|
||||||
params: {
|
params: {
|
||||||
projectId,
|
projectId,
|
||||||
viewId: route.query.view
|
viewId: route.query.view,
|
||||||
},
|
},
|
||||||
hash,
|
hash,
|
||||||
})
|
})
|
||||||
|
Loading…
x
Reference in New Issue
Block a user