paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-02 21:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: translate /admin/tags

Browse Source
This commit is contained in:
Abhinav Raut
2025-03-31 01:24:47 +05:30
parent a3098a1dbd
commit 9aa9a5e1b2
6 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/features/admin/tags/TagsForm.vue
View File

@@ -2,7 +2,7 @@
<form>
<FormField v-slot="{ componentField }" name="name">
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel>{{$t('form.field.name')}}</FormLabel>
<FormControl>
<Input type="text" placeholder="billing" v-bind="componentField" />
</FormControl>

8
frontend/src/features/admin/tags/dataTableColumns.js
View File

@@ -2,11 +2,11 @@ import { h } from 'vue'
import dropdown from './dataTableDropdown.vue'
import { format } from 'date-fns'
export const columns = [
export const createColumns = (t) => [
{
accessorKey: 'name',
header: function () {
return h('div', { class: 'text-center' }, 'Name')
return h('div', { class: 'text-center' }, t('form.field.name'))
},
cell: function ({ row }) {
return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
@@ -15,7 +15,7 @@ export const columns = [
{
accessorKey: 'created_at',
header: function () {
return h('div', { class: 'text-center' }, 'Created at')
return h('div', { class: 'text-center' }, t('form.field.createdAt'))
},
cell: function ({ row }) {
return h('div', { class: 'text-center' }, format(row.getValue('created_at'), 'PPpp'))
@@ -24,7 +24,7 @@ export const columns = [
{
accessorKey: 'updated_at',
header: function () {
return h('div', { class: 'text-center' }, 'Updated at')
return h('div', { class: 'text-center' }, t('form.field.updatedAt'))
},
cell: function ({ row }) {
return h('div', { class: 'text-center' }, format(row.getValue('updated_at'), 'PPpp'))

32
frontend/src/features/admin/tags/dataTableDropdown.vue
View File

@@ -1,46 +1,47 @@
<template>
<!--- Dropdown menu for tag actions -->
<Dialog v-model:open="dialogOpen">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="w-8 h-8 p-0">
<span class="sr-only">Open menu</span>
<span class="sr-only"></span>
<MoreHorizontal class="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DialogTrigger as-child>
<DropdownMenuItem> Edit </DropdownMenuItem>
<DropdownMenuItem> {{t('globals.buttons.edit')}} </DropdownMenuItem>
</DialogTrigger>
<DropdownMenuItem @click="openAlertDialog"> Delete </DropdownMenuItem>
<DropdownMenuItem @click="openAlertDialog"> {{t('globals.buttons.delete')}} </DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit tag</DialogTitle>
<DialogDescription> Change the tag name. Click save when you're done. </DialogDescription>
<DialogTitle>{{t('admin.conversation_tags.edit')}}</DialogTitle>
<DialogDescription> {{t('admin.conversation_tags.edit.description')}} </DialogDescription>
</DialogHeader>
<TagsForm @submit.prevent="onSubmit">
<template #footer>
<DialogFooter class="mt-10">
<Button type="submit"> Save changes </Button>
<Button type="submit"> {{t('globals.buttons.save')}} </Button>
</DialogFooter>
</template>
</TagsForm>
</DialogContent>
</Dialog>
<!-- Alert dialog for delete confirmation -->
<AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogTitle>{{t('admin.conversation_tags.delete_confirmation_title')}}</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the tag and
<strong>remove it from all conversations.</strong>
{{t('admin.conversation_tags.delete_confirmation')}}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction @click="deleteTag">Delete</AlertDialogAction>
<AlertDialogCancel>{{t('globals.buttons.cancel')}}</AlertDialogCancel>
<AlertDialogAction @click="deleteTag">{{t('globals.buttons.delete')}}</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
@@ -58,7 +59,7 @@ import {
import { Button } from '@/components/ui/button'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { formSchema } from './formSchema.js'
import { createFormSchema } from './formSchema.js'
import {
Dialog,
DialogContent,
@@ -81,8 +82,10 @@ import {
import { useEmitter } from '@/composables/useEmitter'
import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
import TagsForm from './TagsForm.vue'
import { useI18n } from 'vue-i18n'
import api from '@/api/index.js'
const { t } = useI18n()
const dialogOpen = ref(false)
const alertOpen = ref(false)
const emitter = useEmitter()
@@ -99,14 +102,13 @@ const props = defineProps({
})
const form = useForm({
validationSchema: toTypedSchema(formSchema)
validationSchema: toTypedSchema(createFormSchema(t)),
})
const onSubmit = form.handleSubmit(async (values) => {
await api.updateTag(props.tag.id, values)
emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
title: 'Success',
description: 'Tag updated successfully'
description: t('admin.conversation_tags.updated'),
})
dialogOpen.value = false
emitRefreshTagsList()

6
frontend/src/features/admin/tags/formSchema.js
View File

@@ -1,11 +1,11 @@
import * as z from 'zod'
export const formSchema = z.object({
export const createFormSchema = (t) => z.object({
name: z
.string({
required_error: 'Tag name is required.'
required_error: t('form.error.name.required'),
})
.min(3, {
message: 'Tag name must be at least 3 characters.'
message: t('admin.conversation_tags.name.valid'),
})
})

22
frontend/src/views/admin/tags/TagsView.vue
View File

@@ -7,17 +7,17 @@
<div class="flex justify-end mb-4 w-full">
<Dialog v-model:open="dialogOpen">
<DialogTrigger as-child>
<Button class="ml-auto">New Tag</Button>
<Button class="ml-auto">{{ t('admin.conversation_tags.new') }}</Button>
</DialogTrigger>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle class="mb-1">Create new tag</DialogTitle>
<DialogDescription>Set tag name. Click save when you're done.</DialogDescription>
<DialogTitle class="mb-1">{{ t('admin.conversation_tags.new') }}</DialogTitle>
<DialogDescription>{{ t('admin.conversation_tags.new.description') }}</DialogDescription>
</DialogHeader>
<TagsForm @submit.prevent="onSubmit">
<template #footer>
<DialogFooter class="mt-10">
<Button type="submit">Save changes</Button>
<Button type="submit">{{ t('globals.buttons.save') }}</Button>
</DialogFooter>
</template>
</TagsForm>
@@ -26,7 +26,7 @@
</div>
</div>
<div>
<DataTable :columns="columns" :data="tags" />
<DataTable :columns="createColumns(t)" :data="tags" />
</div>
</div>
</template>
@@ -42,7 +42,7 @@ import { ref, onMounted } from 'vue'
import DataTable from '@/components/datatable/DataTable.vue'
import AdminPageWithHelp from '@/layouts/admin/AdminPageWithHelp.vue'
import { Spinner } from '@/components/ui/spinner'
import { columns } from '@/features/admin/tags/dataTableColumns.js'
import { createColumns } from '@/features/admin/tags/dataTableColumns.js'
import { Button } from '@/components/ui/button'
import TagsForm from '@/features/admin/tags/TagsForm.vue'
@@ -57,12 +57,14 @@ import {
} from '@/components/ui/dialog'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { formSchema } from '../../../features/admin/tags/formSchema.js'
import { createFormSchema } from '../../../features/admin/tags/formSchema.js'
import { useEmitter } from '@/composables/useEmitter'
import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
import { handleHTTPError } from '@/utils/http'
import { useI18n } from 'vue-i18n'
import api from '@/api'
const { t } = useI18n()
const isLoading = ref(false)
const tags = ref([])
const emitter = useEmitter()
@@ -76,7 +78,7 @@ onMounted(() => {
})
const form = useForm({
validationSchema: toTypedSchema(formSchema)
validationSchema: toTypedSchema(createFormSchema(t))
})
const getTags = async () => {
@@ -93,12 +95,10 @@ const onSubmit = form.handleSubmit(async (values) => {
dialogOpen.value = false
getTags()
emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
title: 'Success',
description: 'Tag created successfully'
description: t('admin.conversation_tags.created')
})
} catch (error) {
emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
title: 'Error',
variant: 'destructive',
description: handleHTTPError(error).message
})

10
i18n/en.json
View File

@@ -281,6 +281,16 @@
"admin.sla.follow_up_delay": "Follow Up Delay",
"admin.sla.notification_recipients": "Notification Recipients",
"admin.sla.no_notifications_configured": "No notifications configured",
"admin.conversation_tags": "Tags",
"admin.conversation_tags.edit.description": "Change the tag name. Click save when you're done.",
"admin.conversation_tags.edit": "Edit Tag",
"admin.conversation_tags.new": "New Tag",
"admin.conversation_tags.new.description": "Set tag name. Click save when you're done.",
"admin.conversation_tags.updated": "Tag updated successfully",
"admin.conversation_tags.created": "Tag created successfully",
"admin.conversation_tags.name.valid": "Tag name should at least 3 characters",
"admin.conversation_tags.delete_confirmation_title": "Are you absolutely sure?",
"admin.conversation_tags.delete_confirmation": "This action cannot be undone. This will permanently delete this tag, and remove it from all conversations.",
"globals.buttons.save": "Save",
"globals.buttons.save_changes": "Save changes",
"globals.buttons.cancel": "Cancel",