test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added translation in Filter, SortBy & ColumnsSettings Component

Browse Source
This commit is contained in:
Shariq Ansari 2024-04-15 20:28:19 +05:30
parent 5567a197ca
commit 2e9a4c7a68
3 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/ColumnSettings.vue
View File

@ -24,7 +24,7 @@
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<DragIcon class="h-3.5" /> <DragIcon class="h-3.5" />
<div>{{ element.label }}</div> <div>{{ __(element.label) }}</div>
</div> </div>
<div class="flex cursor-pointer items-center gap-1"> <div class="flex cursor-pointer items-center gap-1">
<Button <Button
@ -56,7 +56,7 @@
class="w-full !justify-start !text-gray-600" class="w-full !justify-start !text-gray-600"
variant="ghost" variant="ghost"
@click="togglePopover()" @click="togglePopover()"
label="Add Column" :label="__('Add Column')"
> >
<template #prefix> <template #prefix>
<FeatherIcon name="plus" class="h-4" /> <FeatherIcon name="plus" class="h-4" />
@ -69,7 +69,7 @@
class="w-full !justify-start !text-gray-600" class="w-full !justify-start !text-gray-600"
variant="ghost" variant="ghost"
@click="reset(close)" @click="reset(close)"
label="Reset Changes" :label="__('Reset Changes')"
> >
<template #prefix> <template #prefix>
<ReloadIcon class="h-4" /> <ReloadIcon class="h-4" />
@ -80,7 +80,7 @@
class="w-full !justify-start !text-gray-600" class="w-full !justify-start !text-gray-600"
variant="ghost" variant="ghost"
@click="resetToDefault(close)" @click="resetToDefault(close)"
label="Reset to Default" :label="__('Reset to Default')"
> >
<template #prefix> <template #prefix>
<ReloadIcon class="h-4" /> <ReloadIcon class="h-4" />
@ -96,32 +96,32 @@
<FormControl <FormControl
type="text" type="text"
size="md" size="md"
label="Label" :label="__('Label')"
v-model="column.label" v-model="column.label"
class="w-full" class="w-full"
placeholder="Column Label" :placeholder="__('First Name')"
/> />
<FormControl <FormControl
type="text" type="text"
size="md" size="md"
label="Width" :label="__('Width')"
class="w-full" class="w-full"
v-model="column.width" v-model="column.width"
placeholder="Column Width" placeholder="10rem"
description="Width can be in number, pixel or rem (eg. 3, 30px, 10rem)" :description="__('Width can be in number, pixel or rem (eg. 3, 30px, 10rem)')"
:debounce="500" :debounce="500"
/> />
</div> </div>
<div class="flex w-full gap-2 border-t pt-2"> <div class="flex w-full gap-2 border-t pt-2">
<Button <Button
variant="subtle" variant="subtle"
label="Cancel" :label="__('Cancel')"
class="w-full flex-1" class="w-full flex-1"
@click="cancelUpdate" @click="cancelUpdate"
/> />
<Button <Button
variant="solid" variant="solid"
label="Update" :label="__('Update')"
class="w-full flex-1" class="w-full flex-1"
@click="updateColumn(column)" @click="updateColumn(column)"
/> />

50
frontend/src/components/Filter.vue
View File

@ -24,14 +24,14 @@
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="w-13 pl-2 text-end text-base text-gray-600"> <div class="w-13 pl-2 text-end text-base text-gray-600">
{{ i == 0 ? 'Where' : 'And' }} {{ i == 0 ? __('Where') : __('And') }}
</div> </div>
<div id="fieldname" class="!min-w-[140px]"> <div id="fieldname" class="!min-w-[140px]">
<Autocomplete <Autocomplete
:value="f.field.fieldname" :value="f.field.fieldname"
:options="filterableFields.data" :options="filterableFields.data"
@change="(e) => updateFilter(e, i)" @change="(e) => updateFilter(e, i)"
placeholder="Filter by..." :placeholder="__('First Name')"
/> />
</div> </div>
<div id="operator"> <div id="operator">
@ -40,7 +40,7 @@
v-model="f.operator" v-model="f.operator"
@change="(e) => updateOperator(e, f)" @change="(e) => updateOperator(e, f)"
:options="getOperators(f.field.fieldtype, f.field.fieldname)" :options="getOperators(f.field.fieldtype, f.field.fieldname)"
placeholder="Operator" placeholder="Equals"
/> />
</div> </div>
<div id="value" class="!min-w-[140px]"> <div id="value" class="!min-w-[140px]">
@ -48,7 +48,7 @@
:is="getValSelect(f)" :is="getValSelect(f)"
v-model="f.value" v-model="f.value"
@change="(v) => updateValue(v, f)" @change="(v) => updateValue(v, f)"
placeholder="Value" placeholder="John Doe"
/> />
</div> </div>
</div> </div>
@ -58,21 +58,21 @@
v-else v-else
class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600" class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
> >
Empty - Choose a field to filter by {{ __('Empty - Choose a field to filter by') }}
</div> </div>
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<Autocomplete <Autocomplete
value="" value=""
:options="filterableFields.data" :options="filterableFields.data"
@change="(e) => setfilter(e)" @change="(e) => setfilter(e)"
placeholder="Filter by..." :placeholder="__('First name')"
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<Button <Button
class="!text-gray-600" class="!text-gray-600"
variant="ghost" variant="ghost"
@click="togglePopover()" @click="togglePopover()"
label="Add Filter" :label="__('Add Filter')"
> >
<template #prefix> <template #prefix>
<FeatherIcon name="plus" class="h-4" /> <FeatherIcon name="plus" class="h-4" />
@ -84,7 +84,7 @@
v-if="filters?.size" v-if="filters?.size"
class="!text-gray-600" class="!text-gray-600"
variant="ghost" variant="ghost"
label="Clear all Filter" :label="__('Clear all Filter')"
@click="clearfilter(close)" @click="clearfilter(close)"
/> />
</div> </div>
@ -529,71 +529,71 @@ const oppositeOperatorMap = {
const timespanOptions = [ const timespanOptions = [
{ {
label: 'Last Week', label: __('Last Week'),
value: 'last week', value: 'last week',
}, },
{ {
label: 'Last Month', label: __('Last Month'),
value: 'last month', value: 'last month',
}, },
{ {
label: 'Last Quarter', label: __('Last Quarter'),
value: 'last quarter', value: 'last quarter',
}, },
{ {
label: 'Last 6 Months', label: __('Last 6 Months'),
value: 'last 6 months', value: 'last 6 months',
}, },
{ {
label: 'Last Year', label: __('Last Year'),
value: 'last year', value: 'last year',
}, },
{ {
label: 'Yesterday', label: __('Yesterday'),
value: 'yesterday', value: 'yesterday',
}, },
{ {
label: 'Today', label: __('Today'),
value: 'today', value: 'today',
}, },
{ {
label: 'Tomorrow', label: __('Tomorrow'),
value: 'tomorrow', value: 'tomorrow',
}, },
{ {
label: 'This Week', label: __('This Week'),
value: 'this week', value: 'this week',
}, },
{ {
label: 'This Month', label: __('This Month'),
value: 'this month', value: 'this month',
}, },
{ {
label: 'This Quarter', label: __('This Quarter'),
value: 'this quarter', value: 'this quarter',
}, },
{ {
label: 'This Year', label: __('This Year'),
value: 'this year', value: 'this year',
}, },
{ {
label: 'Next Week', label: __('Next Week'),
value: 'next week', value: 'next week',
}, },
{ {
label: 'Next Month', label: __('Next Month'),
value: 'next month', value: 'next month',
}, },
{ {
label: 'Next Quarter', label: __('Next Quarter'),
value: 'next quarter', value: 'next quarter',
}, },
{ {
label: 'Next 6 Months', label: __('Next 6 Months'),
value: 'next 6 months', value: 'next 6 months',
}, },
{ {
label: 'Next Year', label: __('Next Year'),
value: 'next year', value: 'next year',
}, },
] ]

16
frontend/src/components/SortBy.vue
View File

@ -33,15 +33,15 @@
:value="sort.fieldname" :value="sort.fieldname"
:options="sortOptions.data" :options="sortOptions.data"
@change="(e) => updateSort(e, i)" @change="(e) => updateSort(e, i)"
placeholder="Sort by" :placeholder="__('First Name')"
/> />
<FormControl <FormControl
class="!w-32" class="!w-32"
type="select" type="select"
v-model="sort.direction" v-model="sort.direction"
:options="[ :options="[
{ label: 'Ascending', value: 'asc' }, { label: __('Ascending'), value: 'asc' },
{ label: 'Descending', value: 'desc' }, { label: __('Descending'), value: 'desc' },
]" ]"
@change=" @change="
(e) => { (e) => {
@ -49,7 +49,7 @@
apply() apply()
} }
" "
placeholder="Sort by" :placeholder="__('Ascending')"
/> />
<Button variant="ghost" icon="x" @click="removeSort(i)" /> <Button variant="ghost" icon="x" @click="removeSort(i)" />
</div> </div>
@ -58,13 +58,13 @@
v-else v-else
class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600" class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
> >
Empty - Choose a field to sort by {{ __('Empty - Choose a field to sort by') }}
</div> </div>
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<Autocomplete <Autocomplete
:options="options" :options="options"
value="" value=""
placeholder="Sort by" :placeholder="__('First Name')"
@change="(e) => setSort(e)" @change="(e) => setSort(e)"
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
@ -72,7 +72,7 @@
class="!text-gray-600" class="!text-gray-600"
variant="ghost" variant="ghost"
@click="togglePopover()" @click="togglePopover()"
label="Add Sort" :label="__('Add Sort')"
> >
<template #prefix> <template #prefix>
<FeatherIcon name="plus" class="h-4" /> <FeatherIcon name="plus" class="h-4" />
@ -84,7 +84,7 @@
v-if="sortValues?.size" v-if="sortValues?.size"
class="!text-gray-600" class="!text-gray-600"
variant="ghost" variant="ghost"
label="Clear Sort" :label="__('Clear Sort')"
@click="clearSort(close)" @click="clearSort(close)"
/> />
</div> </div>