feat: userTeam script setup (#1976)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1976 Reviewed-by: konrad <k@knt.li> Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
konrad
parent
2c270d063e
commit
0e41b78712
1 changed files with 218 additions and 225 deletions
|
|
@ -9,7 +9,7 @@
|
||||||
class="control is-expanded"
|
class="control is-expanded"
|
||||||
:class="{ 'is-loading': searchService.loading }"
|
:class="{ 'is-loading': searchService.loading }"
|
||||||
>
|
>
|
||||||
<multiselect
|
<Multiselect
|
||||||
:loading="searchService.loading"
|
:loading="searchService.loading"
|
||||||
:placeholder="$t('misc.searchPlaceholder')"
|
:placeholder="$t('misc.searchPlaceholder')"
|
||||||
@search="find"
|
@search="find"
|
||||||
|
|
@ -131,35 +131,42 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {defineComponent, ShallowReactive, shallowReactive} from 'vue'
|
||||||
|
export default defineComponent({ name: 'userTeamShare' })
|
||||||
|
</script>
|
||||||
|
|
||||||
import UserNamespaceService from '../../services/userNamespace'
|
<script setup lang="ts">
|
||||||
import UserNamespaceModel from '../../models/userNamespace'
|
import {ref, reactive, computed} from 'vue'
|
||||||
import UserListModel from '../../models/userList'
|
import type {PropType} from 'vue'
|
||||||
import UserListService from '../../services/userList'
|
import {useStore} from 'vuex'
|
||||||
import UserService from '../../services/user'
|
import {useI18n} from 'vue-i18n'
|
||||||
import UserModel from '../../models/user'
|
|
||||||
|
|
||||||
import TeamNamespaceService from '../../services/teamNamespace'
|
import UserNamespaceService from '@/services/userNamespace'
|
||||||
import TeamNamespaceModel from '../../models/teamNamespace'
|
import UserNamespaceModel from '@/models/userNamespace'
|
||||||
import TeamListModel from '../../models/teamList'
|
import UserListModel from '@/models/userList'
|
||||||
import TeamListService from '../../services/teamList'
|
import UserListService from '@/services/userList'
|
||||||
import TeamService from '../../services/team'
|
import UserService from '@/services/user'
|
||||||
import TeamModel from '../../models/team'
|
import UserModel from '@/models/user'
|
||||||
|
|
||||||
import rights from '../../models/constants/rights.json'
|
import TeamNamespaceService from '@/services/teamNamespace'
|
||||||
|
import TeamNamespaceModel from '@/models/teamNamespace'
|
||||||
|
import TeamListModel from '@/models/teamList'
|
||||||
|
import TeamListService from '@/services/teamList'
|
||||||
|
import TeamService from '@/services/team'
|
||||||
|
import TeamModel from '@/models/team'
|
||||||
|
|
||||||
|
import RIGHTS from '@/models/constants/rights.json'
|
||||||
import Multiselect from '@/components/input/multiselect.vue'
|
import Multiselect from '@/components/input/multiselect.vue'
|
||||||
import Nothing from '@/components/misc/nothing.vue'
|
import Nothing from '@/components/misc/nothing.vue'
|
||||||
|
import { success } from '@/message'
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'userTeamShare',
|
|
||||||
props: {
|
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String as PropType<'list' | 'namespace'>,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
shareType: {
|
shareType: {
|
||||||
type: String,
|
type: String as PropType<'user' | 'team' | 'namespace'>,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
id: {
|
id: {
|
||||||
|
|
@ -170,202 +177,188 @@ export default defineComponent({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
|
|
||||||
stuffModel: Object,
|
|
||||||
searchService: Object,
|
|
||||||
sharable: Object,
|
|
||||||
|
|
||||||
found: [],
|
|
||||||
searchLabel: '',
|
|
||||||
rights: rights,
|
|
||||||
selectedRight: {},
|
|
||||||
|
|
||||||
typeString: '',
|
|
||||||
sharables: [], // This holds either teams or users who this namepace or list is shared with
|
|
||||||
showDeleteModal: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Nothing,
|
|
||||||
Multiselect,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
userInfo() {
|
|
||||||
return this.$store.state.auth.info
|
|
||||||
},
|
|
||||||
shareTypeNames() {
|
|
||||||
if (this.shareType === 'user') {
|
|
||||||
return this.$tc('list.share.userTeam.typeUser', 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.shareType === 'team') {
|
|
||||||
return this.$tc('list.share.userTeam.typeTeam', 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
shareTypeName() {
|
|
||||||
if (this.shareType === 'user') {
|
|
||||||
return this.$tc('list.share.userTeam.typeUser', 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.shareType === 'team') {
|
|
||||||
return this.$tc('list.share.userTeam.typeTeam', 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
sharableName() {
|
|
||||||
if (this.type === 'list') {
|
|
||||||
return this.$t('list.list.title')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.shareType === 'namespace') {
|
|
||||||
return this.$t('namespace.namespace')
|
|
||||||
}
|
|
||||||
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.shareType === 'user') {
|
|
||||||
this.searchService = new UserService()
|
|
||||||
this.sharable = new UserModel()
|
|
||||||
this.searchLabel = 'username'
|
|
||||||
|
|
||||||
if (this.type === 'list') {
|
|
||||||
this.typeString = 'list'
|
|
||||||
this.stuffService = new UserListService()
|
|
||||||
this.stuffModel = new UserListModel({listId: this.id})
|
|
||||||
} else if (this.type === 'namespace') {
|
|
||||||
this.typeString = 'namespace'
|
|
||||||
this.stuffService = new UserNamespaceService()
|
|
||||||
this.stuffModel = new UserNamespaceModel({
|
|
||||||
namespaceId: this.id,
|
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
throw new Error('Unknown type: ' + this.type)
|
|
||||||
}
|
|
||||||
} else if (this.shareType === 'team') {
|
|
||||||
this.searchService = new TeamService()
|
|
||||||
this.sharable = new TeamModel()
|
|
||||||
this.searchLabel = 'name'
|
|
||||||
|
|
||||||
if (this.type === 'list') {
|
const {t} = useI18n()
|
||||||
this.typeString = 'list'
|
|
||||||
this.stuffService = new TeamListService()
|
// This user service is either a userNamespaceService or a userListService, depending on the type we are using
|
||||||
this.stuffModel = new TeamListModel({listId: this.id})
|
let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
|
||||||
} else if (this.type === 'namespace') {
|
let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
|
||||||
this.typeString = 'namespace'
|
let searchService: ShallowReactive<UserService | TeamService>
|
||||||
this.stuffService = new TeamNamespaceService()
|
let sharable: UserModel | TeamModel
|
||||||
this.stuffModel = new TeamNamespaceModel({
|
|
||||||
namespaceId: this.id,
|
const searchLabel = ref('')
|
||||||
|
const selectedRight = ref({})
|
||||||
|
|
||||||
|
|
||||||
|
// This holds either teams or users who this namepace or list is shared with
|
||||||
|
const sharables = ref([])
|
||||||
|
const showDeleteModal = ref(false)
|
||||||
|
|
||||||
|
|
||||||
|
const store = useStore()
|
||||||
|
const userInfo = computed(() => store.state.auth.info)
|
||||||
|
|
||||||
|
function createShareTypeNameComputed(count: number) {
|
||||||
|
return computed(() => {
|
||||||
|
if (props.shareType === 'user') {
|
||||||
|
return t('list.share.userTeam.typeUser', count)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.shareType === 'team') {
|
||||||
|
return t('list.share.userTeam.typeTeam', count)
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const shareTypeNames = createShareTypeNameComputed(2)
|
||||||
|
const shareTypeName = createShareTypeNameComputed(1)
|
||||||
|
|
||||||
|
const sharableName = computed(() => {
|
||||||
|
if (props.type === 'list') {
|
||||||
|
return t('list.list.title')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.shareType === 'namespace') {
|
||||||
|
return t('namespace.namespace')
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
|
})
|
||||||
|
|
||||||
|
if (props.shareType === 'user') {
|
||||||
|
searchService = shallowReactive(new UserService())
|
||||||
|
sharable = reactive(new UserModel())
|
||||||
|
searchLabel.value = 'username'
|
||||||
|
|
||||||
|
if (props.type === 'list') {
|
||||||
|
stuffService = shallowReactive(new UserListService())
|
||||||
|
stuffModel = reactive(new UserListModel({listId: props.id}))
|
||||||
|
} else if (props.type === 'namespace') {
|
||||||
|
stuffService = shallowReactive(new UserNamespaceService())
|
||||||
|
stuffModel = reactive(new UserNamespaceModel({
|
||||||
|
namespaceId: props.id,
|
||||||
|
}))
|
||||||
} else {
|
} else {
|
||||||
throw new Error('Unknown type: ' + this.type)
|
throw new Error('Unknown type: ' + props.type)
|
||||||
|
}
|
||||||
|
} else if (props.shareType === 'team') {
|
||||||
|
searchService = new TeamService()
|
||||||
|
sharable = reactive(new TeamModel())
|
||||||
|
searchLabel.value = 'name'
|
||||||
|
|
||||||
|
if (props.type === 'list') {
|
||||||
|
stuffService = shallowReactive(new TeamListService())
|
||||||
|
stuffModel = reactive(new TeamListModel({listId: props.id}))
|
||||||
|
} else if (props.type === 'namespace') {
|
||||||
|
stuffService = shallowReactive(new TeamNamespaceService())
|
||||||
|
stuffModel = reactive(new TeamNamespaceModel({
|
||||||
|
namespaceId: props.id,
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
throw new Error('Unknown type: ' + props.type)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
throw new Error('Unkown share type')
|
throw new Error('Unkown share type')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.load()
|
load()
|
||||||
},
|
|
||||||
methods: {
|
async function load() {
|
||||||
async load() {
|
sharables.value = await stuffService.getAll(stuffModel)
|
||||||
this.sharables = await this.stuffService.getAll(this.stuffModel)
|
sharables.value.forEach(({id, right}) =>
|
||||||
this.sharables.forEach((s) =>
|
selectedRight.value[id] = right,
|
||||||
this.selectedRight[s.id] = s.right,
|
|
||||||
)
|
)
|
||||||
},
|
|
||||||
|
|
||||||
async deleteSharable() {
|
|
||||||
if (this.shareType === 'user') {
|
|
||||||
this.stuffModel.userId = this.sharable.username
|
|
||||||
} else if (this.shareType === 'team') {
|
|
||||||
this.stuffModel.teamId = this.sharable.id
|
|
||||||
}
|
}
|
||||||
|
|
||||||
await this.stuffService.delete(this.stuffModel)
|
async function deleteSharable() {
|
||||||
this.showDeleteModal = false
|
if (props.shareType === 'user') {
|
||||||
for (const i in this.sharables) {
|
stuffModel.userId = sharable.username
|
||||||
|
} else if (props.shareType === 'team') {
|
||||||
|
stuffModel.teamId = sharable.id
|
||||||
|
}
|
||||||
|
|
||||||
|
await stuffService.delete(stuffModel)
|
||||||
|
showDeleteModal.value = false
|
||||||
|
for (const i in sharables.value) {
|
||||||
if (
|
if (
|
||||||
(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
|
(sharables.value[i].username === stuffModel.userId && props.shareType === 'user') ||
|
||||||
(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
|
(sharables.value[i].id === stuffModel.teamId && props.shareType === 'team')
|
||||||
) {
|
) {
|
||||||
this.sharables.splice(i, 1)
|
sharables.value.splice(i, 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.$message.success({message: this.$t('list.share.userTeam.removeSuccess', {type: this.shareTypeName, sharable: this.sharableName})})
|
success({message: t('list.share.userTeam.removeSuccess', {
|
||||||
},
|
type: shareTypeName.value,
|
||||||
|
sharable: sharableName.value,
|
||||||
|
})})
|
||||||
|
}
|
||||||
|
|
||||||
async add(admin) {
|
async function add(admin) {
|
||||||
if (admin === null) {
|
if (admin === null) {
|
||||||
admin = false
|
admin = false
|
||||||
}
|
}
|
||||||
this.stuffModel.right = rights.READ
|
stuffModel.right = RIGHTS.READ
|
||||||
if (admin) {
|
if (admin) {
|
||||||
this.stuffModel.right = rights.ADMIN
|
stuffModel.right = RIGHTS.ADMIN
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.shareType === 'user') {
|
if (props.shareType === 'user') {
|
||||||
this.stuffModel.userId = this.sharable.username
|
stuffModel.userId = sharable.username
|
||||||
} else if (this.shareType === 'team') {
|
} else if (props.shareType === 'team') {
|
||||||
this.stuffModel.teamId = this.sharable.id
|
stuffModel.teamId = sharable.id
|
||||||
}
|
}
|
||||||
|
|
||||||
await this.stuffService.create(this.stuffModel)
|
await stuffService.create(stuffModel)
|
||||||
this.$message.success({message: this.$t('list.share.userTeam.addedSuccess', {type: this.shareTypeName})})
|
success({message: t('list.share.userTeam.addedSuccess', {type: shareTypeName.value})})
|
||||||
await this.load()
|
await load()
|
||||||
},
|
}
|
||||||
|
|
||||||
async toggleType(sharable) {
|
async function toggleType(sharable) {
|
||||||
if (
|
if (
|
||||||
this.selectedRight[sharable.id] !== rights.ADMIN &&
|
selectedRight.value[sharable.id] !== RIGHTS.ADMIN &&
|
||||||
this.selectedRight[sharable.id] !== rights.READ &&
|
selectedRight.value[sharable.id] !== RIGHTS.READ &&
|
||||||
this.selectedRight[sharable.id] !== rights.READ_WRITE
|
selectedRight.value[sharable.id] !== RIGHTS.READ_WRITE
|
||||||
) {
|
) {
|
||||||
this.selectedRight[sharable.id] = rights.READ
|
selectedRight.value[sharable.id] = RIGHTS.READ
|
||||||
}
|
}
|
||||||
this.stuffModel.right = this.selectedRight[sharable.id]
|
stuffModel.right = selectedRight.value[sharable.id]
|
||||||
|
|
||||||
if (this.shareType === 'user') {
|
if (props.shareType === 'user') {
|
||||||
this.stuffModel.userId = sharable.username
|
stuffModel.userId = sharable.username
|
||||||
} else if (this.shareType === 'team') {
|
} else if (props.shareType === 'team') {
|
||||||
this.stuffModel.teamId = sharable.id
|
stuffModel.teamId = sharable.id
|
||||||
}
|
}
|
||||||
|
|
||||||
const r = await this.stuffService.update(this.stuffModel)
|
const r = await stuffService.update(stuffModel)
|
||||||
for (const i in this.sharables) {
|
for (const i in sharables.value) {
|
||||||
if (
|
if (
|
||||||
(this.sharables[i].username ===
|
(sharables.value[i].username ===
|
||||||
this.stuffModel.userId &&
|
stuffModel.userId &&
|
||||||
this.shareType === 'user') ||
|
props.shareType === 'user') ||
|
||||||
(this.sharables[i].id === this.stuffModel.teamId &&
|
(sharables.value[i].id === stuffModel.teamId &&
|
||||||
this.shareType === 'team')
|
props.shareType === 'team')
|
||||||
) {
|
) {
|
||||||
this.sharables[i].right = r.right
|
sharables.value[i].right = r.right
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.$message.success({message: this.$t('list.share.userTeam.updatedSuccess', {type: this.shareTypeName})})
|
success({message: t('list.share.userTeam.updatedSuccess', {type: shareTypeName.value})})
|
||||||
},
|
}
|
||||||
|
|
||||||
async find(query) {
|
const found = ref([])
|
||||||
|
async function find(query) {
|
||||||
if (query === '') {
|
if (query === '') {
|
||||||
this.clearAll()
|
clearAll()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
found.value = await searchService.getAll({}, {s: query})
|
||||||
|
}
|
||||||
|
|
||||||
this.found = await this.searchService.getAll({}, {s: query})
|
function clearAll() {
|
||||||
},
|
found.value = []
|
||||||
|
}
|
||||||
clearAll() {
|
|
||||||
this.found = []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue