2022-10-27 19:56:14 +00:00
|
|
|
import {computed, ref, shallowReactive, unref, watch} from 'vue'
|
|
|
|
import {useRouter} from 'vue-router'
|
|
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
import type {MaybeRef} from '@vueuse/core'
|
2023-02-22 10:04:31 +00:00
|
|
|
import {useDebounceFn} from '@vueuse/core'
|
2022-10-27 19:56:14 +00:00
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
import type {IProject} from '@/modelTypes/IProject'
|
2022-10-27 19:56:14 +00:00
|
|
|
import type {ISavedFilter} from '@/modelTypes/ISavedFilter'
|
|
|
|
|
2020-09-26 21:02:37 +00:00
|
|
|
import AbstractService from '@/services/abstractService'
|
2022-10-27 19:56:14 +00:00
|
|
|
|
2022-09-06 09:36:01 +00:00
|
|
|
import SavedFilterModel from '@/models/savedFilter'
|
2022-10-27 19:56:14 +00:00
|
|
|
|
|
|
|
import {useBaseStore} from '@/stores/base'
|
2023-03-28 14:44:20 +00:00
|
|
|
import {useProjectStore} from '@/stores/projects'
|
2022-10-27 19:56:14 +00:00
|
|
|
|
|
|
|
import {objectToSnakeCase, objectToCamelCase} from '@/helpers/case'
|
|
|
|
import {success} from '@/message'
|
2022-11-13 21:04:57 +00:00
|
|
|
import ProjectModel from '@/models/project'
|
2022-10-27 19:56:14 +00:00
|
|
|
|
|
|
|
/**
|
2022-11-13 21:04:57 +00:00
|
|
|
* Calculates the corresponding project id to this saved filter.
|
2022-10-27 19:56:14 +00:00
|
|
|
* This function matches the one in the api.
|
|
|
|
*/
|
2022-11-13 21:04:57 +00:00
|
|
|
function getProjectId(savedFilter: ISavedFilter) {
|
|
|
|
let projectId = savedFilter.id * -1 - 1
|
|
|
|
if (projectId > 0) {
|
|
|
|
projectId = 0
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
2022-11-13 21:04:57 +00:00
|
|
|
return projectId
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
export function getSavedFilterIdFromProjectId(projectId: IProject['id']) {
|
|
|
|
let filterId = projectId * -1 - 1
|
|
|
|
// FilterIds from projectIds are always positive
|
2022-10-27 19:56:14 +00:00
|
|
|
if (filterId < 0) {
|
|
|
|
filterId = 0
|
|
|
|
}
|
|
|
|
return filterId
|
|
|
|
}
|
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
export function isSavedFilter(project: IProject) {
|
|
|
|
return getSavedFilterIdFromProjectId(project.id) > 0
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
2020-09-26 21:02:37 +00:00
|
|
|
|
2022-07-21 16:56:31 +00:00
|
|
|
export default class SavedFilterService extends AbstractService<ISavedFilter> {
|
2020-09-26 21:02:37 +00:00
|
|
|
constructor() {
|
|
|
|
super({
|
|
|
|
get: '/filters/{id}',
|
|
|
|
create: '/filters',
|
|
|
|
update: '/filters/{id}',
|
|
|
|
delete: '/filters/{id}',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
modelFactory(data) {
|
|
|
|
return new SavedFilterModel(data)
|
|
|
|
}
|
|
|
|
|
|
|
|
processModel(model) {
|
|
|
|
// Make filters from this.filters camelCase and set them to the model property:
|
|
|
|
// That's easier than making the whole filter component configurable since that still needs to provide
|
|
|
|
// the filter values in snake_sćase for url parameters.
|
|
|
|
model.filters = objectToCamelCase(model.filters)
|
|
|
|
|
|
|
|
// Make sure all filterValues are passes as strings. This is a requirement of the api.
|
|
|
|
model.filters.filterValue = model.filters.filterValue.map(v => String(v))
|
|
|
|
|
|
|
|
return model
|
|
|
|
}
|
|
|
|
|
|
|
|
beforeUpdate(model) {
|
|
|
|
return this.processModel(model)
|
|
|
|
}
|
|
|
|
|
|
|
|
beforeCreate(model) {
|
|
|
|
return this.processModel(model)
|
|
|
|
}
|
|
|
|
}
|
2022-10-27 19:56:14 +00:00
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
export function useSavedFilter(projectId?: MaybeRef<IProject['id']>) {
|
2022-10-27 19:56:14 +00:00
|
|
|
const router = useRouter()
|
|
|
|
const {t} = useI18n({useScope:'global'})
|
2023-03-28 14:44:20 +00:00
|
|
|
const projectStore = useProjectStore()
|
2022-10-27 19:56:14 +00:00
|
|
|
|
|
|
|
const filterService = shallowReactive(new SavedFilterService())
|
|
|
|
|
2022-10-17 11:14:07 +00:00
|
|
|
const filter = ref<ISavedFilter>(new SavedFilterModel())
|
2022-10-27 19:56:14 +00:00
|
|
|
const filters = computed({
|
|
|
|
get: () => filter.value.filters,
|
|
|
|
set(value) {
|
|
|
|
filter.value.filters = value
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
2022-10-17 11:14:07 +00:00
|
|
|
// load SavedFilter
|
2022-11-13 21:04:57 +00:00
|
|
|
watch(() => unref(projectId), async (watchedProjectId) => {
|
|
|
|
if (watchedProjectId === undefined) {
|
2022-10-27 19:56:14 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
// We assume the projectId in the route is the pseudoproject
|
|
|
|
const savedFilterId = getSavedFilterIdFromProjectId(watchedProjectId)
|
2022-10-27 19:56:14 +00:00
|
|
|
|
|
|
|
filter.value = new SavedFilterModel({id: savedFilterId})
|
|
|
|
const response = await filterService.get(filter.value)
|
|
|
|
response.filters = objectToSnakeCase(response.filters)
|
|
|
|
filter.value = response
|
|
|
|
}, {immediate: true})
|
|
|
|
|
|
|
|
async function createFilter() {
|
|
|
|
filter.value = await filterService.create(filter.value)
|
2023-03-28 14:44:20 +00:00
|
|
|
await projectStore.loadProjects()
|
2022-11-13 21:04:57 +00:00
|
|
|
router.push({name: 'project.index', params: {projectId: getProjectId(filter.value)}})
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function saveFilter() {
|
|
|
|
const response = await filterService.update(filter.value)
|
2023-03-28 14:45:08 +00:00
|
|
|
await projectStore.loadProjects()
|
2022-10-27 19:56:14 +00:00
|
|
|
success({message: t('filters.edit.success')})
|
|
|
|
response.filters = objectToSnakeCase(response.filters)
|
|
|
|
filter.value = response
|
2022-11-13 21:04:57 +00:00
|
|
|
await useBaseStore().setCurrentProject(new ProjectModel({
|
|
|
|
id: getProjectId(filter.value),
|
2022-10-27 19:56:14 +00:00
|
|
|
title: filter.value.title,
|
|
|
|
}))
|
|
|
|
router.back()
|
|
|
|
}
|
|
|
|
|
|
|
|
async function deleteFilter() {
|
|
|
|
await filterService.delete(filter.value)
|
2023-03-28 14:44:48 +00:00
|
|
|
await projectStore.loadProjects()
|
2022-10-27 19:56:14 +00:00
|
|
|
success({message: t('filters.delete.success')})
|
2023-03-25 13:27:19 +00:00
|
|
|
router.push({name: 'projects.index'})
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
|
|
|
|
2023-02-22 10:04:31 +00:00
|
|
|
const titleValid = ref(true)
|
|
|
|
const validateTitleField = useDebounceFn(() => {
|
|
|
|
titleValid.value = filter.value.title !== ''
|
|
|
|
}, 100)
|
|
|
|
|
|
|
|
async function createFilterWithValidation() {
|
|
|
|
if (!titleValid.value) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
return createFilter()
|
|
|
|
}
|
|
|
|
|
|
|
|
async function saveFilterWithValidation() {
|
|
|
|
if (!titleValid.value) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
return saveFilter()
|
|
|
|
}
|
|
|
|
|
2022-10-27 19:56:14 +00:00
|
|
|
return {
|
|
|
|
createFilter,
|
2023-02-22 10:04:31 +00:00
|
|
|
createFilterWithValidation,
|
2022-10-27 19:56:14 +00:00
|
|
|
saveFilter,
|
2023-02-22 10:04:31 +00:00
|
|
|
saveFilterWithValidation,
|
2022-10-27 19:56:14 +00:00
|
|
|
deleteFilter,
|
|
|
|
|
|
|
|
filter,
|
|
|
|
filters,
|
|
|
|
|
|
|
|
filterService,
|
2023-02-22 10:04:31 +00:00
|
|
|
|
|
|
|
titleValid,
|
|
|
|
validateTitleField,
|
2022-10-27 19:56:14 +00:00
|
|
|
}
|
|
|
|
}
|