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/components/tasks/edit-task.vue

@@ -1,7 +1,7 @@
 <template>
 	<form @submit.prevent="editTaskSubmit()">
 		<div class="field">
-			<label class="label" for="tasktext">Title</label>
+			<label class="label" for="tasktext">{{ $t('task.attributes.title') }}</label>
 			<div class="control">
 				<input
 					:class="{ disabled: taskService.loading }"
@@ -9,7 +9,6 @@
 					@change="editTaskSubmit()"
 					class="input"
 					id="tasktext"
-					placeholder="The task text is here..."
 					type="text"
 					v-focus
 					v-model="taskEditTask.title"
@@ -17,26 +16,26 @@
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="taskdescription">Description</label>
+			<label class="label" for="taskdescription">{{ $t('task.attributes.description') }}</label>
 			<div class="control">
 				<editor
 					:preview-is-default="false"
 					id="taskdescription"
-					placeholder="The tasks description goes here..."
+					:placeholder="$t('task.description.placeholder')"
 					v-if="editorActive"
 					v-model="taskEditTask.description"
 				/>
 			</div>
 		</div>
 
-		<strong>Reminders</strong>
+		<strong>{{ $t('task.attributes.reminders') }}</strong>
 		<reminders
 			@change="editTaskSubmit()"
 			v-model="taskEditTask.reminderDates"
 		/>
 
 		<div class="field">
-			<label class="label">Labels</label>
+			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control">
 				<edit-labels
 					:task-id="taskEditTask.id"
@@ -46,7 +45,7 @@
 		</div>
 
 		<div class="field">
-			<label class="label">Color</label>
+			<label class="label">{{ $t('task.attributes.color') }}</label>
 			<div class="control">
 				<color-picker v-model="taskEditTask.hexColor" />
 			</div>
@@ -57,14 +56,14 @@
 			class="is-fullwidth"
 			@click="editTaskSubmit()"
 		>
-			Save
+			{{ $t('misc.save') }}
 		</x-button>
 
 		<router-link
 			class="mt-2 has-text-centered is-block"
 			:to="{name: 'task.detail', params: {id: taskEditTask.id}}"
 		>
-			Open task detail view
+			{{ $t('task.openDetail') }}
 		</router-link>
 	</form>
 </template>
@@ -150,7 +149,7 @@ export default {
 				.then((r) => {
 					this.$set(this, 'taskEditTask', r)
 					this.initTaskFields()
-					this.success({message: 'The task has been saved successfully.'})
+					this.success({message: this.$t('task.detail.updateSuccess')})
 				})
 				.catch((e) => {
 					this.error(e)

src/components/tasks/gantt-component.vue

@@ -7,7 +7,7 @@
 					type="secondary"
 					icon="filter"
 				>
-					Filters
+					{{ $t('filters.title') }}
 				</x-button>
 			</div>
 			<filter-popup
@@ -108,8 +108,9 @@
 							'has-super-high-priority':
 								t.priority === priorities.DO_NOW,
 						}"
-					>{{ t.title }}</span
 					>
+						{{ t.title }}
+					</span>
 					<priority-label :priority="t.priority"/>
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
 					<a @click="editTask(theTasks[k])" class="edit-toggle">
@@ -148,7 +149,7 @@
 						@resizestop="resizeTask"
 						axis="x"
 						class="task nodate"
-						v-tooltip="'This task has no dates set.'"
+						v-tooltip="$t('list.gantt.noDates')"
 					>
 						<span>{{ t.title }}</span>
 					</VueDragResize>
@@ -172,14 +173,14 @@
 				/>
 			</transition>
 			<x-button @click="showCreateNewTask" :shadow="false" icon="plus">
-				Add a new task
+				{{ $t('list.list.newTaskCta') }}
 			</x-button>
 		</form>
 		<transition name="fade">
 			<card
 				v-if="isTaskEdit"
 				class="taskedit"
-				title="Edit Task"
+				:title="$t('list.list.editTask')"
 				@close="() => {isTaskEdit = false;taskToEdit = null}"
 				:has-close="true"
 			>

src/components/tasks/partials/attachments.vue

@@ -4,7 +4,7 @@
 			<span class="icon is-grey">
 				<icon icon="paperclip"/>
 			</span>
-			Attachments
+			{{ $t('task.attachment.title') }}
 		</h3>
 
 		<input
@@ -35,18 +35,16 @@
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
 					<p class="collapses">
-						<span>
-							created
-							<span v-tooltip="formatDate(a.created)">{{
-									formatDateSince(a.created)
-								}}</span>
-							by
+						<i18n path="task.attachment.createdBy">
+							<span v-tooltip="formatDate(a.created)">
+								{{ formatDateSince(a.created) }}
+							</span>
 							<user
 								:avatar-size="24"
 								:user="a.createdBy"
 								:is-inline="true"
 							/>
-						</span>
+						</i18n>
 						<span>
 							{{ a.file.getHumanSize() }}
 						</span>
@@ -59,14 +57,14 @@
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="'Download this attachment'"
 						>
-							Download
+							{{ $t('task.attachment.download') }}
 						</a>
 						<a
 							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-if="editEnabled"
 							v-tooltip="'Delete this attachment'"
 						>
-							Delete
+							{{ $t('misc.delete') }}
 						</a>
 					</p>
 				</div>
@@ -82,7 +80,7 @@
 			type="secondary"
 			:shadow="false"
 		>
-			Upload attachment
+			{{ $t('task.attachment.upload') }}
 		</x-button>
 
 		<!-- Dropzone -->
@@ -95,7 +93,7 @@
 				<div class="icon">
 					<icon icon="cloud-upload-alt"/>
 				</div>
-				<div class="hint">Drop files here to upload</div>
+				<div class="hint">{{ $t('task.attachment.drop') }}</div>
 			</div>
 		</div>
 
@@ -106,11 +104,10 @@
 				v-if="showDeleteModal"
 				@submit="deleteAttachment()"
 			>
-				<span slot="header">Delete attachment</span>
+				<span slot="header">{{ $t('task.attachment.delete') }}</span>
 				<p slot="text">
-					Are you sure you want to delete the attachment
-					{{ attachmentToDelete.file.name }}?<br/>
-					<b>This CANNOT BE UNDONE!</b>
+					{{ $t('task.attachment.deleteText1', {filename: attachmentUpload.file.name}) }}<br/>
+					<strong>{{ $t('task.attachment.deleteText2') }}</strong>
 				</p>
 			</modal>
 		</transition>

src/components/tasks/partials/comments.vue

@@ -4,17 +4,15 @@
 			<span class="icon is-grey">
 				<icon :icon="['far', 'comments']"/>
 			</span>
-			Comments
+			{{ $t('task.comment.title') }}
 		</h3>
 		<div class="comments">
 			<span
 				class="is-inline-flex is-align-items-center"
-				v-if="
-					taskCommentService.loading && saving === null && !creating
-				"
+				v-if="taskCommentService.loading && saving === null && !creating"
 			>
 				<span class="loader is-inline-block mr-2"></span>
-				Loading comments...
+				{{ $t('task.comment.loading') }}
 			</span>
 			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
@@ -35,8 +33,7 @@
 							height="20"
 							width="20"
 						/>
-						<strong>{{ c.author.getDisplayName() }}</strong
-						>&nbsp;
+						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
 						<span v-tooltip="formatDate(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
@@ -44,7 +41,7 @@
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
 							v-tooltip="formatDate(c.updated)"
 						>
-							· edited {{ formatDateSince(c.updated) }}
+							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
 						<transition name="fade">
 							<span
@@ -54,10 +51,8 @@
 									saving === c.id
 								"
 							>
-								<span
-									class="loader is-inline-block mr-2"
-								></span>
-								Saving...
+								<span class="loader is-inline-block mr-2"></span>
+								{{ $t('misc.saving') }}
 							</span>
 							<span
 								class="has-text-success"
@@ -66,7 +61,7 @@
 									saved === c.id
 								"
 							>
-								Saved!
+								{{ $t('misc.saved') }}
 							</span>
 						</transition>
 					</div>
@@ -104,10 +99,8 @@
 								class="is-inline-flex"
 								v-if="taskCommentService.loading && creating"
 							>
-								<span
-									class="loader is-inline-block mr-2"
-								></span>
-								Creating comment...
+								<span class="loader is-inline-block mr-2"></span>
+								{{ $t('task.comment.creating') }}
 							</span>
 						</transition>
 						<div class="field">
@@ -120,20 +113,18 @@
 								:has-preview="false"
 								:upload-callback="attachmentUpload"
 								:upload-enabled="true"
-								placeholder="Add your comment..."
+								:placeholder="$t('task.comment.placeholder')"
 								v-if="editorActive"
 								v-model="newComment.comment"
 							/>
 						</div>
 						<div class="field">
 							<x-button
-								:loading="
-									taskCommentService.loading && !isCommentEdit
-								"
+								:loading="taskCommentService.loading && !isCommentEdit"
 								:disabled="newComment.comment === ''"
 								@click="addComment()"
 							>
-								Comment
+								{{ $t('task.comment.comment') }}
 							</x-button>
 						</div>
 					</div>
@@ -147,10 +138,10 @@
 				@submit="deleteComment()"
 				v-if="showDeleteModal"
 			>
-				<span slot="header">Delete this comment</span>
+				<span slot="header">{{ $t('task.comment.delete') }}</span>
 				<p slot="text">
-					Are you sure you want to delete this comment? <br/>This
-					<b>CANNOT BE UNDONE!</b>
+					{{ $t('task.comment.deleteText1') }}<br/>
+					<strong>{{ $t('task.comment.deleteText2') }}</strong>
 				</p>
 			</modal>
 		</transition>
@@ -258,7 +249,7 @@ export default {
 				.then((r) => {
 					this.comments.push(r)
 					this.newComment.comment = ''
-					this.success({message: 'The comment was added successfully.'})
+					this.success({message: this.$t('task.comment.addedSuccess')})
 				})
 				.catch((e) => {
 					this.error(e)
@@ -327,7 +318,7 @@ export default {
 					this.$set(this.actions, c.id, [
 						{
 							action: () => this.toggleDelete(c.id),
-							title: 'Remove',
+							title: this.$t('misc.delete'),
 						},
 					])
 				})

src/components/tasks/partials/defer-task.vue

@@ -3,28 +3,28 @@
 		:class="{ 'is-loading': taskService.loading }"
 		class="defer-task loading-container"
 	>
-		<label class="label">Defer due date</label>
+		<label class="label">{{ $t('task.deferDueDate.title') }}</label>
 		<div class="defer-days">
 			<x-button
 				@click.prevent.stop="() => deferDays(1)"
 				:shadow="false"
 				type="secondary"
 			>
-				1 day
+				{{ $t('task.deferDueDate.1day') }}
 			</x-button>
 			<x-button
 				@click.prevent.stop="() => deferDays(3)"
 				:shadow="false"
 				type="secondary"
 			>
-				3 days
+				{{ $t('task.deferDueDate.3days') }}
 			</x-button>
 			<x-button
 				@click.prevent.stop="() => deferDays(7)"
 				:shadow="false"
 				type="secondary"
 			>
-				1 week
+				{{ $t('task.deferDueDate.1week') }}
 			</x-button>
 		</div>
 		<flat-pickr
@@ -40,7 +40,6 @@
 <script>
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
-import {mapState} from 'vuex'
 
 export default {
 	name: 'defer-task',
@@ -94,19 +93,21 @@ export default {
 			this.lastValue = this.dueDate
 		},
 	},
-	computed: mapState({
-		flatPickerConfig: state => ({
-			altFormat: 'j M Y H:i',
-			altInput: true,
-			dateFormat: 'Y-m-d H:i',
-			enableTime: true,
-			time_24hr: true,
-			inline: true,
-			locale: {
-				firstDayOfWeek: state.auth.settings.weekStart,
-			},
-		})
-	}),
+	computed: {
+		flatPickerConfig() {
+			return {
+				altFormat: this.$t('date.altFormatLong'),
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				inline: true,
+				locale: {
+					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+				},
+			}
+		},
+	},
 	methods: {
 		deferDays(days) {
 			this.dueDate = new Date(this.dueDate)

src/components/tasks/partials/description.vue

@@ -4,15 +4,15 @@
 			<span class="icon is-grey">
 				<icon icon="align-left"/>
 			</span>
-			Description
+			{{ $t('task.attributes.description') }}
 			<transition name="fade">
 				<span class="is-small is-inline-flex" v-if="loading && saving">
 					<span class="loader is-inline-block mr-2"></span>
-					Saving...
+					{{ $t('misc.saving') }}
 				</span>
 				<span class="is-small has-text-success" v-if="!loading && saved">
 					<icon icon="check"/>
-					Saved!
+					{{ $t('misc.saved') }}
 				</span>
 			</transition>
 		</h3>
@@ -21,8 +21,8 @@
 			:upload-callback="attachmentUpload"
 			:upload-enabled="true"
 			@change="save"
-			placeholder="Click here to enter a description..."
-			empty-text="No description available yet."
+			:placeholder="$t('task.description.placeholder')"
+			:empty-text="$t('task.description.empty')"
 			v-model="task.description"/>
 	</div>
 </template>

src/components/tasks/partials/editAssignees.vue

@@ -5,14 +5,14 @@
 	>
 		<multiselect
 			:loading="listUserService.loading"
-			placeholder="Type to assign a user..."
+			:placeholder="$t('task.assignee.placeholder')"
 			:disabled="disabled"
 			:multiple="true"
 			@search="findUser"
 			:search-results="foundUsers"
 			@select="addAssignee"
 			label="username"
-			select-placeholder="Assign this user"
+			:select-placeholder="$t('task.assignee.selectPlaceholder')"
 			v-model="assignees"
 			ref="multiselect"
 		>
@@ -84,7 +84,7 @@ export default {
 			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
 				.then(() => {
 					this.$emit('input', this.assignees)
-					this.success({message: 'The user has been assigned successfully.'})
+					this.success({message: this.$t('task.assignee.assignSuccess')})
 				})
 				.catch(e => {
 					this.error(e)
@@ -99,7 +99,7 @@ export default {
 							this.assignees.splice(a, 1)
 						}
 					}
-					this.success({message: 'The user has been unassinged successfully.'})
+					this.success({message: this.$t('task.assignee.assignSuccess')})
 				})
 				.catch(e => {
 					this.error(e)

src/components/tasks/partials/editLabels.vue

@@ -1,7 +1,7 @@
 <template>
 	<multiselect
 		:loading="loading"
-		placeholder="Type to add a new label..."
+		:placeholder="$t('task.label.placeholder')"
 		:multiple="true"
 		@search="findLabel"
 		:search-results="foundLabels"
@@ -9,7 +9,7 @@
 		label="title"
 		:creatable="true"
 		@create="createAndAddLabel"
-		create-placeholder="Add this as new label"
+		:create-placeholder="$t('task.label.createPlaceholder')"
 		v-model="labels"
 		:search-delay="10"
 	>
@@ -104,7 +104,7 @@ export default {
 				.then(() => {
 					this.$emit('input', this.labels)
 					if (showNotification) {
-						this.success({message: 'The label has been added successfully.'})
+						this.success({message: this.$t('task.label.addSuccess')})
 					}
 				})
 				.catch(e => {
@@ -121,7 +121,7 @@ export default {
 						}
 					}
 					this.$emit('input', this.labels)
-					this.success({message: 'The label has been removed successfully.'})
+					this.success({message: this.$t('task.label.removeSuccess')})
 				})
 				.catch(e => {
 					this.error(e)
@@ -133,7 +133,7 @@ export default {
 				.then(r => {
 					this.addLabel(r, false)
 					this.labels.push(r)
-					this.success({message: 'The label has been created successfully.'})
+					this.success({message: this.$t('task.label.removeSuccess')})
 				})
 				.catch(e => {
 					this.error(e)

src/components/tasks/partials/heading.vue

@@ -14,11 +14,11 @@
 		<transition name="fade">
 			<span class="is-inline-flex is-align-items-center" v-if="loading && saving">
 				<span class="loader is-inline-block mr-2"></span>
-				Saving...
+				{{ $t('misc.saving') }}
 			</span>
 			<span class="has-text-success is-inline-flex is-align-content-center" v-if="!loading && saved">
 				<icon icon="check" class="mr-2"/>
-				Saved!
+				{{ $t('misc.saved') }}
 			</span>
 		</transition>
 	</div>

src/components/tasks/partials/listSearch.vue

@@ -3,13 +3,13 @@
 		class="control is-expanded"
 		v-focus
 		:loading="listSerivce.loading"
-		placeholder="Type to search for a list..."
+		:placeholder="$t('list.search')"
 		@search="findLists"
 		:search-results="foundLists"
 		@select="select"
 		label="title"
 		v-model="list"
-		select-placeholder="Click or press enter to select this list"
+		:select-placeholder="$t('list.searchSelect')"
 	>
 		<template v-slot:searchResult="props">
 			<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
@@ -65,7 +65,7 @@ export default {
 			if (namespace !== null) {
 				return namespace.title
 			}
-			return 'Shared Lists'
+			return this.$t('list.shared')
 		},
 	},
 }

src/components/tasks/partials/priorityLabel.vue

@@ -7,12 +7,12 @@
 			<icon icon="exclamation"/>
 		</span>
 		<span>
-			<template v-if="priority === priorities.UNSET">Unset</template>
-			<template v-if="priority === priorities.LOW">Low</template>
-			<template v-if="priority === priorities.MEDIUM">Medium</template>
-			<template v-if="priority === priorities.HIGH">High</template>
-			<template v-if="priority === priorities.URGENT">Urgent</template>
-			<template v-if="priority === priorities.DO_NOW">DO NOW</template>
+			<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
+			<template v-if="priority === priorities.LOW">{{ $t('task.priority.low') }}</template>
+			<template v-if="priority === priorities.MEDIUM">{{ $t('task.priority.medium') }}</template>
+			<template v-if="priority === priorities.HIGH">{{ $t('task.priority.high') }}</template>
+			<template v-if="priority === priorities.URGENT">{{ $t('task.priority.urgent') }}</template>
+			<template v-if="priority === priorities.DO_NOW">{{ $t('task.priority.doNow') }}</template>
 		</span>
 		<span class="icon" v-if="priority === priorities.DO_NOW">
 			<icon icon="exclamation"/>

src/components/tasks/partials/prioritySelect.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="select">
 		<select :disabled="disabled" @change="updateData" v-model="priority">
-			<option :value="priorities.UNSET">Unset</option>
-			<option :value="priorities.LOW">Low</option>
-			<option :value="priorities.MEDIUM">Medium</option>
-			<option :value="priorities.HIGH">High</option>
-			<option :value="priorities.URGENT">Urgent</option>
-			<option :value="priorities.DO_NOW">DO NOW</option>
+			<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
+			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
+			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
+			<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
+			<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
+			<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</option>
 		</select>
 	</div>
 </template>

src/components/tasks/partials/relatedTasks.vue

@@ -5,7 +5,7 @@
 			@click="showNewRelationForm = !showNewRelationForm"
 			class="is-pulled-right add-task-relation-button"
 			:class="{'is-active': showNewRelationForm}"
-			v-tooltip="'Add a New Task Relation'"
+			v-tooltip="$t('task.relation.add')"
 			type="secondary"
 			icon="plus"
 			:shadow="false"
@@ -13,27 +13,27 @@
 		<transition-group name="fade">
 			<template v-if="editEnabled && showCreate">
 				<label class="label" key="label">
-					New Task Relation
+					{{ $t('task.relation.new') }}
 					<transition name="fade">
 						<span class="is-inline-flex" v-if="taskRelationService.loading">
 							<span class="loader is-inline-block mr-2"></span>
-							Saving...
+							{{ $t('misc.saving') }}
 						</span>
 						<span class="has-text-success" v-if="!taskRelationService.loading && saved">
-							Saved!
+							{{ $t('misc.saved') }}
 						</span>
 					</transition>
 				</label>
 				<div class="field" key="field-search">
 					<multiselect
-						placeholder="Type search for a new task to add as related..."
+						:placeholder="$t('task.relation.searchPlaceholder')"
 						@search="findTasks"
 						:loading="taskService.loading"
 						:search-results="foundTasks"
 						label="title"
 						v-model="newTaskRelationTask"
 						:creatable="true"
-						create-placeholder="Add this as new related task"
+						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
 					>
 						<template v-slot:searchResult="props">
@@ -41,7 +41,7 @@
 								<span
 									class="different-list"
 									v-if="props.option.listId !== listId"
-									v-tooltip="'This task belongs to a different list.'">
+									v-tooltip="$t('task.relation.differentList')">
 									{{ $store.getters['lists/getListById'](props.option.listId) === null ? '' : $store.getters['lists/getListById'](props.option.listId).title }} >
 								</span>
 								{{ props.option.title }}
@@ -64,7 +64,7 @@
 						</div>
 					</div>
 					<div class="control">
-						<x-button @click="addTaskRelation()">Add Task Relation</x-button>
+						<x-button @click="addTaskRelation()">{{ $t('task.relation.add') }}</x-button>
 					</div>
 				</div>
 			</template>
@@ -80,7 +80,7 @@
 								<span
 									class="different-list"
 									v-if="t.listId !== listId"
-									v-tooltip="'This task belongs to a different list.'">
+									v-tooltip="$t('task.relation.differentList')">
 									{{
 										$store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title
 									}} >
@@ -99,7 +99,7 @@
 			</template>
 		</div>
 		<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
-			No task relations yet.
+			{{ $t('task.relation.noneYet') }}
 		</p>
 
 		<!-- Delete modal -->
@@ -108,9 +108,11 @@
 				@close="showDeleteModal = false"
 				@submit="removeTaskRelation()"
 				v-if="showDeleteModal">
-				<span slot="header">Delete Task Relation</span>
-				<p slot="text">Are you sure you want to delete this task relation?<br/>
-					<b>This CANNOT BE UNDONE!</b></p>
+				<span slot="header">{{ $t('task.relation.delete') }}</span>
+				<p slot="text">
+					{{ $t('task.relation.deleteText1') }}<br/>
+					<strong>{{ $t('task.relation.deleteText2') }}</strong>
+				</p>
 			</modal>
 		</transition>
 	</div>

src/components/tasks/partials/reminders.vue

@@ -19,7 +19,7 @@
 			<datepicker
 				v-model="newReminder"
 				@close-on-change="() => addReminderDate()"
-				choose-date-label="Add a new reminder..."
+				:choose-date-label="$t('task.addReminder')"
 			/>
 		</div>
 	</div>

src/components/tasks/partials/repeatAfter.vue

@@ -1,27 +1,27 @@
 <template>
 	<div class="control repeat-after-input">
 		<div class="buttons has-addons is-centered mt-2">
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</x-button>
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</x-button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">{{ $t('task.repeat.everyMonth') }}</x-button>
 		</div>
 		<div class="is-flex is-align-items-center mb-2">
 			<label for="repeatMode" class="is-fullwidth">
-				Repeat mode:
+				{{ $t('task.repeat.mode') }}:
 			</label>
 			<div class="control">
 				<div class="select">
 					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="repeatModes.REPEAT_MODE_DEFAULT">Default</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">Monthly</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">From Current Date</option>
+						<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
+						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
+						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
 					</select>
 				</div>
 			</div>
 		</div>
 		<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
 			<p class="pr-4">
-				Each
+				{{ $t('task.repeat.each') }}
 			</p>
 			<div class="field has-addons is-fullwidth">
 				<div class="control">
@@ -29,7 +29,7 @@
 						:disabled="disabled"
 						@change="updateData"
 						class="input"
-						placeholder="Specify an amount..."
+						:placeholder="$t('task.repeat.specifyAmount')"
 						v-model="repeatAfter.amount"
 						type="number"
 					/>
@@ -37,11 +37,11 @@
 				<div class="control">
 					<div class="select">
 						<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
-							<option value="hours">Hours</option>
-							<option value="days">Days</option>
-							<option value="weeks">Weeks</option>
-							<option value="months">Months</option>
-							<option value="years">Years</option>
+							<option value="hours">{{ $t('task.repeat.hours') }}</option>
+							<option value="days">{{ $t('task.repeat.days') }}</option>
+							<option value="weeks">{{ $t('task.repeat.weeks') }}</option>
+							<option value="months">{{ $t('task.repeat.months') }}</option>
+							<option value="years">{{ $t('task.repeat.years') }}</option>
 						</select>
 					</div>
 				</div>

src/components/tasks/partials/singleTaskInList.vue

@@ -16,7 +16,7 @@
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
 					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
+					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 					{{ $store.getters['lists/getListById'](task.listId).title }}
 				</router-link>
 
@@ -45,7 +45,7 @@
 				v-if="+new Date(task.dueDate) > 0"
 				v-tooltip="formatDate(task.dueDate)"
 			>
-				- Due {{ formatDateSince(task.dueDate) }}
+				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
 			</i>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
@@ -70,7 +70,7 @@
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
 			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
+			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
 		<a
@@ -175,7 +175,11 @@ export default {
 						}
 						this.task = t
 						this.$emit('task-updated', t)
-						this.success({message: 'The task was successfully ' + (this.task.done ? '' : 'un-') + 'marked as done.'}, [{
+						this.success({
+								message: this.task.done ?
+									this.$t('task.doneSuccess') :
+									this.$t('task.undoneSuccess')
+							}, [{
 							title: 'Undo',
 							callback: () => {
 								this.task.done = !this.task.done