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

feat: convert api-config to script setup and ts (#1535)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1535
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-02-13 22:06:26 +00:00 committed by konrad
parent d57c9af332
commit b84fe4c88b
1 changed files with 54 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/components/misc/api-config.vue
View file

@ -39,60 +39,49 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import Message from '@/components/misc/message' import {ref, computed, watch} from 'vue'
import { useI18n } from 'vue-i18n'
import {parseURL} from 'ufo' import {parseURL} from 'ufo'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
export default { import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
name: 'apiConfig', import {success} from '@/message'
components: {
Message, import Message from '@/components/misc/message.vue'
},
data() { const props = defineProps({
return {
configureApi: false,
apiUrl: window.API_URL,
errorMsg: '',
successMsg: '',
}
},
emits: ['foundApi'],
created() {
if (this.apiUrl === '') {
this.configureApi = true
}
},
computed: {
apiDomain() {
return parseURL(this.apiUrl).host || parseURL(window.location.href).host
},
},
props: {
configureOpen: { configureOpen: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
}, },
}, })
watch: { const emit = defineEmits(['foundApi'])
configureOpen: {
handler(value) { const apiUrl = ref(window.API_URL)
this.configureApi = value const configureApi = ref(apiUrl.value === '')
},
immediate: true, const apiDomain = computed(() => parseURL(apiUrl.value).host || parseURL(window.location.href).host)
},
},
methods: { watch(() => props.configureOpen, (value) => {
async setApiUrl() { configureApi.value = value
if (this.apiUrl === '') { }, { immediate: true })
const {t} = useI18n()
const errorMsg = ref('')
const successMsg = ref('')
async function setApiUrl() {
if (apiUrl.value === '') {
// Don't try to check and set an empty url // Don't try to check and set an empty url
this.errorMsg = this.$t('apiConfig.urlRequired') errorMsg.value = t('apiConfig.urlRequired')
return return
} }
try { try {
const url = await checkAndSetApiUrl(this.apiUrl) const url = await checkAndSetApiUrl(apiUrl.value)
if (url === '') { if (url === '') {
// If the config setter function could not figure out a url // If the config setter function could not figure out a url
@ -100,18 +89,16 @@ export default {
} }
// Set it + save it to local storage to save us the hoops // Set it + save it to local storage to save us the hoops
this.errorMsg = '' errorMsg.value = ''
this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})}) apiUrl.value = url
this.configureApi = false success({message: t('apiConfig.success', {domain: apiDomain.value})})
this.apiUrl = url configureApi.value = false
this.$emit('foundApi', this.apiUrl) emit('foundApi', apiUrl.value)
} catch (e) { } catch (e) {
// Still not found, url is still invalid // Still not found, url is still invalid
this.successMsg = '' successMsg.value = ''
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain}) errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})
} }
},
},
} }
</script> </script>