kolaente
befa6f27bb
fix: project table view fix: e2e tests fix: typo in readme fix: list view route fix: don't wait until background is loaded for list to show fix: rename component imports fix: lint fix: parse task text fix: use list card grid fix: use correct class names fix: i18n keys fix: load project fix: task overview fix: list view spacing fix: find project fix: setLoading when updating a project fix: loading saved filter fix: project store loading fix: color picker import fix: cypress tests feat: migrate old list settings chore: add const for project settings fix: wrong projecten rename from lists chore: rename unused variable fix: editor list fix: shortcut list class name fix: pagination list class name fix: notifications list class name fix: list view variable name chore: clarify comment fix: i18n keys fix: router imports fix: comment chore: remove debugging leftover fix: remove duplicate variables fix: change comment fix: list view variable name fix: list view css class name fix: list item property name fix: name update tasks function correctly fix: update comment fix: project create route fix: list view class names fix: list view component name fix: result list class name fix: animation class list name fix: change debug log fix: revert a few navigation changes fix: use @ for imports of all views fix: rename link share list class fix: remove unused css class fix: dynamically import project components again
169 lines
4.2 KiB
Vue
169 lines
4.2 KiB
Vue
<template>
|
|
<x-button
|
|
v-if="type === 'button'"
|
|
variant="secondary"
|
|
:icon="iconName"
|
|
v-tooltip="tooltipText"
|
|
@click="changeSubscription"
|
|
:disabled="disabled"
|
|
>
|
|
{{ buttonText }}
|
|
</x-button>
|
|
<DropdownItem
|
|
v-else-if="type === 'dropdown'"
|
|
v-tooltip="tooltipText"
|
|
@click="changeSubscription"
|
|
:disabled="disabled"
|
|
:icon="iconName"
|
|
>
|
|
{{ buttonText }}
|
|
</DropdownItem>
|
|
<BaseButton
|
|
v-else
|
|
v-tooltip="tooltipText"
|
|
@click="changeSubscription"
|
|
:class="{'is-disabled': disabled}"
|
|
:disabled="disabled"
|
|
>
|
|
<span class="icon">
|
|
<icon :icon="iconName"/>
|
|
</span>
|
|
{{ buttonText }}
|
|
</BaseButton>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {computed, shallowRef, type PropType} from 'vue'
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
|
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
|
|
|
import SubscriptionService from '@/services/subscription'
|
|
import SubscriptionModel from '@/models/subscription'
|
|
import type {ISubscription} from '@/modelTypes/ISubscription'
|
|
|
|
import {success} from '@/message'
|
|
import type { IconProp } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
const props = defineProps({
|
|
entity: String,
|
|
entityId: Number,
|
|
isButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
modelValue: {
|
|
type: Object as PropType<ISubscription>,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String as PropType<'button' | 'dropdown' | 'null'>,
|
|
default: 'button',
|
|
},
|
|
})
|
|
|
|
const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const subscriptionService = shallowRef(new SubscriptionService())
|
|
|
|
const {t} = useI18n({useScope: 'global'})
|
|
|
|
const tooltipText = computed(() => {
|
|
if (disabled.value) {
|
|
if (props.entity === 'project' && subscriptionEntity.value === 'namespace') {
|
|
return t('task.subscription.subscribedProjectThroughParentNamespace')
|
|
}
|
|
if (props.entity === 'task' && subscriptionEntity.value === 'namespace') {
|
|
return t('task.subscription.subscribedTaskThroughParentNamespace')
|
|
}
|
|
if (props.entity === 'task' && subscriptionEntity.value === 'project') {
|
|
return t('task.subscription.subscribedTaskThroughParentProject')
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
switch (props.entity) {
|
|
case 'namespace':
|
|
return props.modelValue !== null ?
|
|
t('task.subscription.subscribedNamespace') :
|
|
t('task.subscription.notSubscribedNamespace')
|
|
case 'project':
|
|
return props.modelValue !== null ?
|
|
t('task.subscription.subscribedProject') :
|
|
t('task.subscription.notSubscribedProject')
|
|
case 'task':
|
|
return props.modelValue !== null ?
|
|
t('task.subscription.subscribedTask') :
|
|
t('task.subscription.notSubscribedTask')
|
|
}
|
|
|
|
return ''
|
|
})
|
|
|
|
const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
|
|
const iconName = computed<IconProp>(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
|
|
const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
|
|
|
|
function changeSubscription() {
|
|
if (disabled.value) {
|
|
return
|
|
}
|
|
|
|
if (props.modelValue === null) {
|
|
subscribe()
|
|
} else {
|
|
unsubscribe()
|
|
}
|
|
}
|
|
|
|
async function subscribe() {
|
|
const subscription = new SubscriptionModel({
|
|
entity: props.entity,
|
|
entityId: props.entityId,
|
|
})
|
|
await subscriptionService.value.create(subscription)
|
|
emit('update:modelValue', subscription)
|
|
|
|
let message = ''
|
|
switch (props.entity) {
|
|
case 'namespace':
|
|
message = t('task.subscription.subscribeSuccessNamespace')
|
|
break
|
|
case 'project':
|
|
message = t('task.subscription.subscribeSuccessProject')
|
|
break
|
|
case 'task':
|
|
message = t('task.subscription.subscribeSuccessTask')
|
|
break
|
|
}
|
|
success({message})
|
|
}
|
|
|
|
async function unsubscribe() {
|
|
const subscription = new SubscriptionModel({
|
|
entity: props.entity,
|
|
entityId: props.entityId,
|
|
})
|
|
await subscriptionService.value.delete(subscription)
|
|
emit('update:modelValue', null)
|
|
|
|
let message = ''
|
|
switch (props.entity) {
|
|
case 'namespace':
|
|
message = t('task.subscription.unsubscribeSuccessNamespace')
|
|
break
|
|
case 'project':
|
|
message = t('task.subscription.unsubscribeSuccessProject')
|
|
break
|
|
case 'task':
|
|
message = t('task.subscription.unsubscribeSuccessTask')
|
|
break
|
|
}
|
|
success({message})
|
|
}
|
|
</script>
|