local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: userTeam script setup (#1976)

Browse source 
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 2022-05-22 14:59:43 +00:00 committed by konrad
parent 2c270d063e
commit 0e41b78712
1 changed files with 218 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

333
src/components/sharing/userTeam.vue
View file

@ -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: [], const {t} = useI18n()
searchLabel: '',
rights: rights,
selectedRight: {},
typeString: '', // This user service is either a userNamespaceService or a userListService, depending on the type we are using
sharables: [], // This holds either teams or users who this namepace or list is shared with let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
showDeleteModal: false, let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
} let searchService: ShallowReactive<UserService | TeamService>
}, let sharable: UserModel | TeamModel
components: {
Nothing, const searchLabel = ref('')
Multiselect, const selectedRight = ref({})
},
computed: {
userInfo() { // This holds either teams or users who this namepace or list is shared with
return this.$store.state.auth.info const sharables = ref([])
}, const showDeleteModal = ref(false)
shareTypeNames() {
if (this.shareType === 'user') {
return this.$tc('list.share.userTeam.typeUser', 2) 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 (this.shareType === 'team') { if (props.shareType === 'team') {
return this.$tc('list.share.userTeam.typeTeam', 2) return t('list.share.userTeam.typeTeam', count)
} }
return '' 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 shareTypeNames = createShareTypeNameComputed(2)
this.typeString = 'list' const shareTypeName = createShareTypeNameComputed(1)
this.stuffService = new TeamListService()
this.stuffModel = new TeamListModel({listId: this.id}) const sharableName = computed(() => {
} else if (this.type === 'namespace') { if (props.type === 'list') {
this.typeString = 'namespace' return t('list.list.title')
this.stuffService = new TeamNamespaceService()
this.stuffModel = new TeamNamespaceModel({
namespaceId: this.id,
})
} else {
throw new Error('Unknown type: ' + this.type)
} }
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: ' + 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 {
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() { async function deleteSharable() {
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.delete(this.stuffModel) await stuffService.delete(stuffModel)
this.showDeleteModal = false showDeleteModal.value = false
for (const i in this.sharables) { 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>