Add translations (#562)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/562
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/views/namespaces/ListNamespaces.vue

@@ -1,20 +1,20 @@
 <template>
 	<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
 		<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
-			Create namespace
+			{{ $t('namespace.create.title') }}
 		</x-button>
 		<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
-			Create saved filter
+			{{ $t('filters.create.title') }}
 		</x-button>
 
 		<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState">
-			Show Archived
+			{{ $t('namespace.showArchived') }}
 		</fancycheckbox>
 
 		<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
-			You don't have any namespaces right now.
+			{{ $t('namespace.noneAvailable') }}
 			<router-link :to="{name: 'namespace.create'}">
-				Create a namespace.
+				{{ $t('namespace.create.title') }}.
 			</router-link>
 		</p>
 
@@ -26,7 +26,7 @@
 				v-if="n.id > 0 && n.lists.length > 0"
 				icon="plus"
 			>
-				Create list
+				{{ $t('list.create.header') }}
 			</x-button>
 			<x-button
 				:to="{name: 'namespace.settings.archive', params: {id:  n.id}}"
@@ -35,20 +35,20 @@
 				v-if="n.isArchived"
 				icon="archive"
 			>
-				Un-Archive
+				{{ $t('namespace.unarchive') }}
 			</x-button>
 
 			<h1>
 				<span>{{ n.title }}</span>
 				<span class="is-archived" v-if="n.isArchived">
-					Archived
+					{{ $t('namespace.archived') }}
 				</span>
 			</h1>
 
 			<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
-				This namespace does not contain any lists.
+				{{ $t('namespaces.noLists') }}
 				<router-link :to="{name: 'list.create', params: {id:  n.id}}">
-					Create a new list in this namespace.
+					{{ $t('namespace.createList') }}
 				</router-link>
 			</p>
 
@@ -71,7 +71,7 @@
 					>
 						<div class="is-archived-container">
 							<span class="is-archived" v-if="l.isArchived">
-								Archived
+								{{ $t('namespace.archived') }}
 							</span>
 							<span
 								:class="{'is-favorite': l.isFavorite, 'is-archived': l.isArchived}"
@@ -112,7 +112,7 @@ export default {
 		this.loadBackgroundsForLists()
 	},
 	mounted() {
-		this.setTitle('Namespaces & Lists')
+		this.setTitle(this.$t('namespace.title'))
 	},
 	computed: mapState({
 		namespaces(state) {

src/views/namespaces/NewNamespace.vue

@@ -1,11 +1,11 @@
 <template>
 	<create-edit
-		title="Create a new namespace"
+		:title="$t('namespace.create.title')"
 		@create="newNamespace()"
 		:create-disabled="namespace.title === ''"
 	>
 		<div class="field">
-			<label class="label" for="namespaceTitle">Namespace Title</label>
+			<label class="label" for="namespaceTitle">{{ $t('namespace.attributes.title') }}</label>
 			<div
 				class="control is-expanded"
 				:class="{ 'is-loading': namespaceService.loading }"
@@ -14,7 +14,7 @@
 					@keyup.enter="newNamespace()"
 					@keyup.esc="back()"
 					class="input"
-					placeholder="The namespace's name goes here..."
+					:placeholder="$t('namespace.attributes.titlePlaceholder')"
 					type="text"
 					:class="{ disabled: namespaceService.loading }"
 					v-focus
@@ -23,21 +23,19 @@
 			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
-			Please specify a title.
+			{{ $t('namespace.create.titleRequired') }}
 		</p>
 		<div class="field">
-			<label class="label">Color</label>
+			<label class="label">{{ $t('namespace.attributes.color') }}</label>
 			<div class="control">
 				<color-picker v-model="namespace.hexColor" />
 			</div>
 		</div>
 		<p
 			class="is-small has-text-centered"
-			v-tooltip.bottom="
-				'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'
-			"
+			v-tooltip.bottom="$t('namespace.create.explanation')"
 		>
-			What's a namespace?
+			{{ $t('namespace.create.tooltip') }}
 		</p>
 	</create-edit>
 </template>
@@ -66,7 +64,7 @@ export default {
 		this.namespaceService = new NamespaceService()
 	},
 	mounted() {
-		this.setTitle('Create a new namespace')
+		this.setTitle(this.$t('namespace.create.title'))
 	},
 	methods: {
 		newNamespace() {
@@ -80,7 +78,7 @@ export default {
 				.create(this.namespace)
 				.then((r) => {
 					this.$store.commit('namespaces/addNamespace', r)
-					this.success({message: 'The namespace was successfully created.'})
+					this.success({message: this.$t('namespace.create.success') })
 					this.$router.back()
 				})
 				.catch((e) => {

src/views/namespaces/settings/archive.vue

@@ -3,13 +3,12 @@
 		@close="$router.back()"
 		@submit="archiveNamespace()"
 	>
-		<span slot="header">{{ namespace.isArchived ? 'Un-' : '' }}Archive this namespace</span>
+		<span slot="header">{{ title }}</span>
 		<p slot="text" v-if="namespace.isArchived">
-			You will be able to create new lists or edit it.
+			{{ $t('namespace.archive.unarchiveText') }}
 		</p>
 		<p slot="text" v-else>
-			You won't be able to edit this namespace or create new list until you un-archive it.<br/>
-			This will also archive all lists in this namespace.
+			{{ $t('namespace.archive.archiveText') }}
 		</p>
 	</modal>
 </template>
@@ -23,12 +22,16 @@ export default {
 		return {
 			namespaceService: NamespaceService,
 			namespace: null,
+			title: ''
 		}
 	},
 	created() {
 		this.namespaceService = new NamespaceService()
 		this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
-		this.setTitle(`Archive "${this.namespace.title}"`)
+		this.title = this.namespace.isArchived ?
+			this.$t('namespace.archive.titleUnarchive', { namespace: this.namespace.title }) :
+			this.$t('namespace.archive.titleArchive', { namespace: this.namespace.title })
+		this.setTitle(this.title)
 	},
 	methods: {
 		archiveNamespace() {
@@ -38,7 +41,7 @@ export default {
 			this.namespaceService.update(this.namespace)
 				.then(r => {
 					this.$store.commit('namespaces/setNamespaceById', r)
-					this.success({message: 'The namespace was successfully archived.'})
+					this.success({message: this.$t('namespace.archive.success')})
 				})
 				.catch(e => {
 					this.error(e)

src/views/namespaces/settings/delete.vue

@@ -3,9 +3,11 @@
 		@close="$router.back()"
 		@submit="deleteNamespace()"
 	>
-		<span slot="header">Delete this namespace</span>
-		<p slot="text">Are you sure you want to delete this namespace and all of its contents?
-			<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
+		<span slot="header">{{ title }}</span>
+		<p slot="text">
+			{{ $t('namespace.delete.text1') }}<br/>
+			{{ $t('namespace.delete.text2') }}
+		</p>
 	</modal>
 </template>
 
@@ -17,13 +19,15 @@ export default {
 	data() {
 		return {
 			namespaceService: NamespaceService,
+			title: '',
 		}
 	},
 	created() {
 		this.namespaceService = new NamespaceService()
 
 		const namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
-		this.setTitle(`Delete "${namespace.title}"`)
+		this.title = this.$t('namespace.delete.title', {namespace: namespace.title})
+		this.setTitle(this.title)
 	},
 	methods: {
 		deleteNamespace() {
@@ -31,7 +35,7 @@ export default {
 
 			this.$store.dispatch('namespaces/deleteNamespace', namespace)
 				.then(() => {
-					this.success({message: 'The namespace was successfully deleted.'})
+					this.success({message: this.$t('namespace.delete.success')})
 					this.$router.push({name: 'home'})
 				})
 				.catch(e => {

src/views/namespaces/settings/edit.vue

@@ -1,53 +1,53 @@
 <template>
 	<create-edit
-		title="Edit This Namespace"
+		:title="title"
 		primary-icon=""
-		primary-label="Save"
+		:primary-label="$t('misc.save')"
 		@primary="save"
-		tertary="Delete"
+		:tertary="$t('misc.delete')"
 		@tertary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
 	>
 		<form @submit.prevent="save()">
 			<div class="field">
-				<label class="label" for="namespacetext">Namespace Name</label>
+				<label class="label" for="namespacetext">{{ $t('namespace.attributes.title') }}</label>
 				<div class="control">
 					<input
 						:class="{ 'disabled': namespaceService.loading}"
 						:disabled="namespaceService.loading"
 						class="input"
 						id="namespacetext"
-						placeholder="The namespace text is here..."
+						:placeholder="$t('namespace.attributes.titlePlaceholder')"
 						type="text"
 						v-focus
 						v-model="namespace.title"/>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="namespacedescription">Description</label>
+				<label class="label" for="namespacedescription">{{ $t('namespace.attributes.description') }}</label>
 				<div class="control">
 					<editor
 						:class="{ 'disabled': namespaceService.loading}"
 						:disabled="namespaceService.loading"
 						:preview-is-default="false"
 						id="namespacedescription"
-						placeholder="The namespaces description goes here..."
+						:placeholder="$t('namespace.attributes.descriptionPlaceholder')"
 						v-if="editorActive"
 						v-model="namespace.description"
 					/>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="isArchivedCheck">Is Archived</label>
+				<label class="label" for="isArchivedCheck">{{ $t('namespace.attributes.archived') }}</label>
 				<div class="control">
 					<fancycheckbox
 						v-model="namespace.isArchived"
-						v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
-						This namespace is archived
+						v-tooltip="$t('namespace.archive.description')">
+						{{ $t('namespace.attributes.isArchived') }}
 					</fancycheckbox>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label">Color</label>
+				<label class="label">{{ $t('namespace.attributes.color') }}</label>
 				<div class="control">
 					<color-picker v-model="namespace.hexColor"/>
 				</div>
@@ -70,9 +70,9 @@ export default {
 	data() {
 		return {
 			namespaceService: NamespaceService,
-
 			namespace: NamespaceModel,
 			editorActive: false,
+			title: '',
 		}
 	},
 	components: {
@@ -115,7 +115,8 @@ export default {
 					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
 					this.manageTeamsComponent = 'manageSharing'
 					this.manageUsersComponent = 'manageSharing'
-					this.setTitle(`Edit "${r.title}"`)
+					this.title = this.$t('namespace.edit.title', {namespace: r.title})
+					this.setTitle(this.title)
 				})
 				.catch(e => {
 					this.error(e)
@@ -126,7 +127,7 @@ export default {
 				.then(r => {
 					// Update the namespace in the parent
 					this.$store.commit('namespaces/setNamespaceById', r)
-					this.success({message: 'The namespace was successfully updated.'})
+					this.success({message: this.$t('namespace.edit.success')})
 					this.$router.back()
 				})
 				.catch(e => {

src/views/namespaces/settings/share.vue

@@ -1,6 +1,6 @@
 <template>
 	<create-edit
-		title="Share this Namespace"
+		:title="title"
 		primary-label=""
 	>
 		<component
@@ -30,10 +30,10 @@ export default {
 	data() {
 		return {
 			namespaceService: NamespaceService,
+			namespace: NamespaceModel,
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
-
-			namespace: NamespaceModel,
+			title: '',
 		}
 	},
 	components: {
@@ -66,7 +66,8 @@ export default {
 					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
 					this.manageTeamsComponent = 'manageSharing'
 					this.manageUsersComponent = 'manageSharing'
-					this.setTitle(`Share "${this.namespace.title}"`)
+					this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
+					this.setTitle(this.title)
 				})
 				.catch(e => {
 					this.error(e)