Skip to content

Commit 5795a55

Browse files
FelixINXFelixINX
authored
✨ 2.8.2 - New table
✨ 2.8.2 - New table
2 parents 3fc49de + 13ce5c9 commit 5795a55

File tree

25 files changed

+1216
-78226
lines changed

25 files changed

+1216
-78226
lines changed

‎components/VehicleSheet/EmptyState.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<aside
3-
class="tw-absolute tw-top-[calc(100vh-15.25rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-top-4 md:tw-left-4 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center"
3+
class="tw-absolute tw-top-[calc(100vh-14rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-top-4 md:tw-left-4 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center"
44
>
55
<svg
66
class="tw-h-12 tw-w-12 md:tw-h-32 md:tw-w-32"

‎components/settings/TableColumns.vue‎

Lines changed: 110 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,120 @@
11
<template>
2-
<div
3-
class="text-error-10 tw-rounded-md tw-bg-error-90 tw-p-2 dark:tw-bg-error-30 dark:tw-text-error-90"
4-
>
5-
{{ $t('temp') }}
6-
</div>
7-
<!--<transition-group name="table-columns" class="tw-list-none !tw-pl-0" tag="ul">
8-
<li
9-
class="tw-flex tw-items-center tw-gap-1"
10-
v-for="(column, index) in columns"
11-
:key="column.field"
2+
<div>
3+
<h3 class="tw-text-xs tw-font-medium tw-leading-4">{{ $t('visible') }}</h3>
4+
<draggable
5+
v-model="visibleColumns"
6+
group="tableColumns"
7+
draggable=".tableColumns"
8+
class="tw-mt-2 tw-space-y-2"
129
>
13-
<TwStandardIconButton
14-
@click="toggleVisiblity(column.field, !column.visible)"
15-
:color="column.visible && 'primary'"
10+
<div
11+
v-for="column in visibleColumns"
12+
:key="column"
13+
class="tableColumns tw-flex tw-h-8 tw-items-center tw-gap-x-2 tw-rounded-lg tw-bg-neutralVariant-90 tw-pr-4 tw-pl-2 tw-text-sm tw-text-neutralVariant-30 dark:tw-bg-neutralVariant-30 dark:tw-text-neutralVariant-80"
1614
>
17-
<TwIcon :path="column.visible ? mdiEyeOutline : mdiEyeOffOutline" />
18-
</TwStandardIconButton>
19-
<span
20-
:class="[
21-
column.visible
22-
? 'tw-font-medium'
23-
: 'tw-text-neutralVariant-30 dark:tw-text-neutral-80',
24-
]"
15+
<TwIcon
16+
:path="mdiReorderHorizontal"
17+
class="!tw-h-[1.125rem] !tw-w-[1.125rem]"
18+
/>
19+
<span>{{ $t(`properties.${column}`) }}</span>
20+
</div>
21+
<div
22+
v-if="!visibleColumns.length"
23+
class="tw-flex tw-items-center tw-justify-center tw-rounded-xl tw-border tw-border-dashed tw-border-neutralVariant-50 tw-px-4 tw-py-4 dark:tw-border-neutralVariant-60"
2524
>
26-
{{ $t(`properties.${column.field}`) }}
27-
</span>
28-
<div class="tw-grow"></div>
29-
<TwStandardIconButton
30-
@click="changeOrder(column.field, true)"
31-
:disabled="index === 0"
25+
{{ $t('dropHereVisible') }}
26+
</div>
27+
</draggable>
28+
<!-- TODO: Convert chip to component with hover effect -->
29+
<button
30+
v-if="visibleColumns.length !== availableColumns.length"
31+
class="tw-mt-2 tw-flex tw-h-8 tw-items-center tw-gap-x-2 tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-50 tw-pr-4 tw-pl-2 tw-text-sm tw-leading-8 dark:tw-border-neutralVariant-60"
32+
@click="addAll"
33+
>
34+
<TwIcon
35+
:path="mdiTableColumnPlusAfter"
36+
class="!tw-h-[1.125rem] !tw-w-[1.125rem]"
37+
/>
38+
<span>{{ $t('addAll') }}</span>
39+
</button>
40+
<h3 class="tw-mt-4 tw-text-xs tw-font-medium tw-leading-4">
41+
{{ $t('hidden') }}
42+
</h3>
43+
<draggable
44+
v-model="hiddenColumns"
45+
group="tableColumns"
46+
class="tw-mt-2 tw-space-y-2"
47+
draggable=".tableColumns"
48+
>
49+
<div
50+
v-for="column in hiddenColumns"
51+
:key="column"
52+
class="tableColumns tw-flex tw-h-8 tw-items-center tw-gap-x-2 tw-rounded-lg tw-bg-neutralVariant-90 tw-pr-4 tw-pl-2 tw-text-sm tw-text-neutralVariant-30 dark:tw-bg-neutralVariant-30 dark:tw-text-neutralVariant-80"
3253
>
33-
<TwIcon :path="mdiArrowUp" />
34-
</TwStandardIconButton>
35-
<TwStandardIconButton
36-
@click="changeOrder(column.field, false)"
37-
:disabled="index + 1 === columns.length"
54+
<TwIcon
55+
:path="mdiReorderHorizontal"
56+
class="!tw-h-[1.125rem] !tw-w-[1.125rem]"
57+
/>
58+
<span>{{ $t(`properties.${column}`) }}</span>
59+
</div>
60+
<div
61+
v-if="!hiddenColumns.length"
62+
slot="header"
63+
class="tw-flex tw-items-center tw-justify-center tw-rounded-xl tw-border tw-border-dashed tw-border-neutralVariant-50 tw-px-4 tw-py-4 dark:tw-border-neutralVariant-60"
3864
>
39-
<TwIcon :path="mdiArrowDown" />
40-
</TwStandardIconButton>
41-
</li>
42-
</transition-group>-->
65+
{{ $t('dropHereHidden') }}
66+
</div>
67+
</draggable>
68+
</div>
4369
</template>
4470

4571
<script>
46-
import {
47-
mdiEyeOutline,
48-
mdiEyeOffOutline,
49-
mdiArrowUp,
50-
mdiArrowDown,
51-
} from '@mdi/js'
72+
import draggable from 'vuedraggable'
73+
74+
import { mdiReorderHorizontal, mdiTableColumnPlusAfter } from '@mdi/js'
5275
5376
export default {
77+
components: {
78+
draggable,
79+
},
5480
data: () => ({
55-
mdiEyeOutline,
56-
mdiEyeOffOutline,
57-
mdiArrowUp,
58-
mdiArrowDown,
81+
mdiReorderHorizontal,
82+
mdiTableColumnPlusAfter,
5983
}),
6084
computed: {
61-
columns() {
62-
return this.$store.state.settings.tableColumns
85+
availableColumns() {
86+
return this.$store.getters['settings/availableTableColumns']
87+
},
88+
visibleColumns: {
89+
get() {
90+
return this.$store.getters['settings/visibleTableColumns']
91+
},
92+
set(value) {
93+
this.$store.commit('settings/set', {
94+
setting: 'selectedTableColumns',
95+
value,
96+
})
97+
},
98+
},
99+
hiddenColumns: {
100+
get() {
101+
return this.$store.getters['settings/hiddenTableColumns']
102+
},
103+
set(value) {
104+
this.$store.commit('settings/set', {
105+
setting: 'selectedTableColumns',
106+
value: this.availableColumns.filter(
107+
(column) => !value.includes(column)
108+
),
109+
})
110+
},
63111
},
64112
},
65113
methods: {
66-
changeOrder(columnField, up) {
67-
this.$store.commit('settings/changeColumnOrder', {
68-
columnField,
69-
up,
70-
})
71-
},
72-
toggleVisiblity(columnField, visibility) {
73-
this.$store.commit('settings/changeVisibilityOfColumn', {
74-
columnField,
75-
visibility,
114+
addAll() {
115+
this.$store.commit('settings/set', {
116+
setting: 'selectedTableColumns',
117+
value: [...this.visibleColumns, ...this.hiddenColumns],
76118
})
77119
},
78120
},
@@ -88,10 +130,18 @@ export default {
88130
<i18n>
89131
{
90132
"en": {
91-
"temp": "This feature has been temporarily disabled. It will return soon once some issues have been resolved."
133+
"visible": "Visible",
134+
"addAll": "Make all columns visible",
135+
"hidden": "Hidden",
136+
"dropHereVisible": "Grab and drop a column here to make it visible",
137+
"dropHereHidden": "Grab and drop a column here to hide it"
92138
},
93139
"fr": {
94-
"temp": "Cette fonctionnalité a été temporairement désactivée. Elle reviendra bientôt une fois que certains problèmes auront été résolus."
140+
"visible": "Visible",
141+
"addAll": "Rendre toutes les colonnes visibles",
142+
"hidden": "Caché",
143+
"dropHereVisible": "Prenez et déposez une colonne ici pour la rendre visible",
144+
"dropHereHidden": "Prenez et déposez une colonne ici pour la masquer"
95145
}
96146
}
97147
</i18n>

‎components/tw/Details.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<details :open="open">
2+
<details @toggle="toggle" ref="details">
33
<summary class="tw-flex tw-list-none tw-items-center tw-justify-between">
44
<slot name="summary" />
55
<TwStandardIconButton
66
:class="{ 'tw-rotate-180': open }"
77
class="tw-transition-transform tw-duration-200 tw-ease-linear"
8-
@click="open = !open"
8+
@click="manual"
99
>
1010
<TwIcon :path="mdiChevronDown" />
1111
</TwStandardIconButton>
@@ -22,5 +22,19 @@ export default {
2222
open: false,
2323
mdiChevronDown,
2424
}),
25+
methods: {
26+
toggle() {
27+
this.open = this.$refs.details.open
28+
},
29+
manual() {
30+
const newState = !this.$refs.details.open
31+
32+
if (newState) {
33+
this.$refs.details.setAttribute('open', '')
34+
} else {
35+
this.$refs.details.removeAttribute('open')
36+
}
37+
},
38+
},
2539
}
2640
</script>

‎components/tw/FilledTextField.vue‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div
3+
class="tw-relative tw-w-96 tw-font-normal"
4+
:class="[supportingText && 'tw-mb-5']"
5+
>
6+
<input
7+
:value="value"
8+
@input="$emit('input', $event.target.value)"
9+
type="text"
10+
:class="[backgroundClasses]"
11+
class="tw-peer tw-h-14 tw-w-96 tw-rounded-t tw-border-b tw-pl-4 tw-pr-[52px] tw-pb-2 tw-pt-6 tw-placeholder-transparent focus:tw-border-b-2 focus:tw-border-primary-40 focus:tw-outline-none dark:focus:tw-border-primary-80"
12+
:placeholder="placeholder"
13+
id="input"
14+
/>
15+
<div
16+
class="tw-pointer-events-none tw-absolute tw-inset-0 peer-hover:tw-bg-opacity-10 dark:peer-hover:tw-bg-opacity-10"
17+
></div>
18+
<label
19+
for="input"
20+
class="tw-pointer-events-none tw-absolute tw-top-0 tw-left-0 tw-ml-4 tw-mr-[52px] tw-mt-2 tw-text-xs tw-duration-300 peer-placeholder-shown:tw-mt-4 peer-placeholder-shown:tw-text-base peer-focus:tw-mt-2 peer-focus:tw-text-xs peer-focus:tw-text-primary-40 dark:peer-focus:tw-text-primary-80"
21+
>
22+
{{ placeholder }}
23+
</label>
24+
<button
25+
class="tw-absolute tw-right-3 tw-top-4"
26+
@click="$emit('text-cleared')"
27+
v-if="value"
28+
:title="clearText"
29+
>
30+
<svg class="tw-h-6 tw-w-6" viewBox="0 0 24 24">
31+
<path
32+
fill="currentColor"
33+
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
34+
/>
35+
</svg>
36+
</button>
37+
38+
<label
39+
v-if="supportingText"
40+
for="input"
41+
class="tw-pointer-events-none tw-absolute -tw-bottom-5 tw-left-4 tw-text-xs"
42+
>
43+
{{ supportingText }}
44+
</label>
45+
</div>
46+
</template>
47+
48+
<script>
49+
export default {
50+
props: {
51+
value: {
52+
required: true,
53+
},
54+
placeholder: {
55+
type: String,
56+
required: true,
57+
},
58+
supportingText: {
59+
type: String,
60+
required: false,
61+
default: null,
62+
},
63+
clearText: {
64+
type: String,
65+
required: false,
66+
default: null,
67+
},
68+
color: {
69+
type: String,
70+
required: false,
71+
default: null,
72+
},
73+
},
74+
computed: {
75+
backgroundClasses() {
76+
switch (this.color) {
77+
case 'background':
78+
return 'tw-bg-neutral-99 dark:tw-bg-neutral-10 tw-text-neutral-10 dark:tw-text-neutral-90'
79+
default:
80+
return 'tw-bg-neutralVariant-90 tw-text-neutralVariant-30 dark:tw-bg-neutralVariant-30 dark:tw-text-neutralVariant-80'
81+
}
82+
},
83+
},
84+
}
85+
</script>

‎i18n/en.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default {
6767
properties: {
6868
agency: 'Agency',
6969
ref: 'Vehicle ID',
70-
label: 'Vehicle number (label)',
70+
label: 'Vehicle number',
7171
tags: 'Tags',
7272
timestamp: 'Last seen',
7373
tripId: 'Trip ID',

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "transit-tracker-frontend",
3-
"version": "2.8.1",
3+
"version": "2.8.2",
44
"private": true,
55
"scripts": {
66
"dev": "nuxt",
@@ -16,7 +16,6 @@
1616
"@nuxtjs/axios": "^5.13.6",
1717
"@nuxtjs/pwa": "^3.3.5",
1818
"@popperjs/core": "^2.11.6",
19-
"@syncfusion/ej2-vue-grids": "^20.3.57",
2019
"animejs": "^3.2.1",
2120
"core-js": "^3.25.5",
2221
"dexie": "^3.0.3",
@@ -32,6 +31,7 @@
3231
"vue-json-excel": "^0.3.0",
3332
"vue-json-viewer": "^2.2.19",
3433
"vue-timeago": "^5.1.3",
34+
"vuedraggable": "^2.24.3",
3535
"vuex-persistedstate": "^4.0.0"
3636
},
3737
"devDependencies": {

0 commit comments

Comments
 (0)