Skip to content
This repository has been archived by the owner on Aug 3, 2024. It is now read-only.

Migrate tags settings (project type) page to Composition API & use omorphia components #1642

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Migrate tags settings (project type) page to Composition API & use omorphia components #1642

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b86a9b
Migrate tags page to Composition API
Mysterious-Dev Feb 10, 2024
886d942
Use omorphia components
Mysterious-Dev Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 133 additions & 132 deletions pages/[type]/[id]/settings/tags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
</div>
<p>
Accurate tagging is important to help people find your
{{ $formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
that apply.
{{ $formatProjectType(props.project.project_type).toLowerCase() }}. Make sure to select all
tags that apply.
</p>
<p v-if="project.versions.length === 0" class="known-errors">
<p v-if="props.project.versions.length === 0" class="known-errors">
Please upload a version first in order to select tags!
</p>
<template v-else>
Expand All @@ -23,21 +23,21 @@
<span class="label__description">
<template v-if="header === 'categories'">
Select all categories that reflect the themes or function of your
{{ $formatProjectType(project.project_type).toLowerCase() }}.
{{ $formatProjectType(props.project.project_type).toLowerCase() }}.
</template>
<template v-else-if="header === 'features'">
Select all of the features that your
{{ $formatProjectType(project.project_type).toLowerCase() }} makes use of.
{{ $formatProjectType(props.project.project_type).toLowerCase() }} makes use of.
</template>
<template v-else-if="header === 'resolutions'">
Select the resolution(s) of textures in your
{{ $formatProjectType(project.project_type).toLowerCase() }}.
{{ $formatProjectType(props.project.project_type).toLowerCase() }}.
</template>
<template v-else-if="header === 'performance impact'">
Select the realistic performance impact of your
{{ $formatProjectType(project.project_type).toLowerCase() }}. Select multiple if the
{{ $formatProjectType(project.project_type).toLowerCase() }} is configurable to
different levels of performance impact.
{{ $formatProjectType(props.project.project_type).toLowerCase() }}. Select multiple
if the {{ $formatProjectType(props.project.project_type).toLowerCase() }} is
configurable to different levels of performance impact.
</template>
</span>
</div>
Expand Down Expand Up @@ -112,141 +112,142 @@
</div>
</template>

<script>
import Checkbox from '~/components/ui/Checkbox.vue'
import StarIcon from '~/assets/images/utils/star.svg'
import SaveIcon from '~/assets/images/utils/save.svg'
<script setup>
import { Checkbox, StarIcon, SaveIcon } from 'omorphia'

export default defineNuxtComponent({
components: {
Checkbox,
SaveIcon,
StarIcon,
},
props: {
project: {
type: Object,
default() {
return {}
},
},
allMembers: {
type: Array,
default() {
return []
},
},
currentMember: {
type: Object,
default() {
return null
},
const data = useNuxtApp()

const props = defineProps({
project: {
type: Object,
default() {
return {}
},
patchProject: {
type: Function,
default() {
return () => {
this.$notify({
group: 'main',
title: 'An error occurred',
text: 'Patch project function not found',
type: 'error',
})
}
},
},
allMembers: {
type: Array,
default() {
return []
},
},
data() {
return {
selectedTags: this.$sortedCategories().filter(
(x) =>
x.project_type === this.project.actualProjectType &&
(this.project.categories.includes(x.name) ||
this.project.additional_categories.includes(x.name))
),
featuredTags: this.$sortedCategories().filter(
(x) =>
x.project_type === this.project.actualProjectType &&
this.project.categories.includes(x.name)
),
}
currentMember: {
type: Object,
default() {
return null
},
},
computed: {
categoryLists() {
const lists = {}
this.$sortedCategories().forEach((x) => {
if (x.project_type === this.project.actualProjectType) {
const header = x.header
if (!lists[header]) {
lists[header] = []
}
lists[header].push(x)
}
})
return lists
patchProject: {
type: Function,
default() {
return () => {
addNotification({
group: 'main',
title: 'An error occurred',
text: 'Patch project function not found',
type: 'error',
})
}
},
patchData() {
const data = {}
// Promote selected categories to featured if there are less than 3 featured
const newFeaturedTags = this.featuredTags.slice()
if (newFeaturedTags.length < 1 && this.selectedTags.length > newFeaturedTags.length) {
const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x))
},
})

nonFeaturedCategories
.slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
.forEach((x) => newFeaturedTags.push(x))
}
// Convert selected and featured categories to backend-usable arrays
const categories = newFeaturedTags.map((x) => x.name)
const additionalCategories = this.selectedTags
.filter((x) => !newFeaturedTags.includes(x))
.map((x) => x.name)
const selectedTags = ref(
data
.$sortedCategories()
.filter(
(x) =>
x.project_type === props.project.actualProjectType &&
(props.project.categories.includes(x.name) ||
props.project.additional_categories.includes(x.name))
)
)

if (
categories.length !== this.project.categories.length ||
categories.some((value) => !this.project.categories.includes(value))
) {
data.categories = categories
}
const featuredTags = ref(
data
.$sortedCategories()
.filter(
(x) =>
x.project_type === props.project.actualProjectType &&
props.project.categories.includes(x.name)
)
)

if (
additionalCategories.length !== this.project.additional_categories.length ||
additionalCategories.some((value) => !this.project.additional_categories.includes(value))
) {
data.additional_categories = additionalCategories
const categoryLists = computed(() => {
const lists = {}
data.$sortedCategories().forEach((x) => {
if (x.project_type === props.project.actualProjectType) {
const header = x.header
if (!lists[header]) {
lists[header] = []
}
lists[header].push(x)
}
})
return lists
})

return data
},
hasChanges() {
return Object.keys(this.patchData).length > 0
},
},
methods: {
toggleCategory(category) {
if (this.selectedTags.includes(category)) {
this.selectedTags = this.selectedTags.filter((x) => x !== category)
if (this.featuredTags.includes(category)) {
this.featuredTags = this.featuredTags.filter((x) => x !== category)
}
} else {
this.selectedTags.push(category)
}
},
toggleFeaturedCategory(category) {
if (this.featuredTags.includes(category)) {
this.featuredTags = this.featuredTags.filter((x) => x !== category)
} else {
this.featuredTags.push(category)
}
},
saveChanges() {
if (this.hasChanges) {
this.patchProject(this.patchData)
}
},
},
const patchData = computed(() => {
const data = {}
// Promote selected categories to featured if there are less than 3 featured
const newFeaturedTags = featuredTags.value.slice()
if (newFeaturedTags.length < 1 && selectedTags.value.length > newFeaturedTags.length) {
const nonFeaturedCategories = selectedTags.value.filter((x) => !newFeaturedTags.includes(x))

nonFeaturedCategories
.slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
.forEach((x) => newFeaturedTags.push(x))
}
// Convert selected and featured categories to backend-usable arrays
const categories = newFeaturedTags.map((x) => x.name)
const additionalCategories = selectedTags.value
.filter((x) => !newFeaturedTags.includes(x))
.map((x) => x.name)

if (
categories.length !== props.project.categories.length ||
categories.some((value) => !props.project.categories.includes(value))
) {
data.categories = categories
}

if (
additionalCategories.length !== props.project.additional_categories.length ||
additionalCategories.some((value) => !props.project.additional_categories.includes(value))
) {
data.additional_categories = additionalCategories
}

return data
})

const hasChanges = computed(() => {
return Object.keys(patchData.value).length > 0
})

function toggleCategory(category) {
if (selectedTags.value.includes(category)) {
selectedTags.value = selectedTags.value.filter((x) => x !== category)
if (featuredTags.value.includes(category)) {
featuredTags.value = featuredTags.value.filter((x) => x !== category)
}
} else {
selectedTags.value.push(category)
}
}

function toggleFeaturedCategory(category) {
if (featuredTags.value.includes(category)) {
featuredTags.value = featuredTags.value.filter((x) => x !== category)
} else {
featuredTags.value.push(category)
}
}

function saveChanges() {
if (hasChanges.value) {
props.patchProject(patchData.value)
}
}
</script>
<style lang="scss" scoped>
.label__title {
Expand Down
Loading