Skip to content

Commit f9f139f

Browse files
zzhenryquezzzzhenryquezz
committed
feat(desk): filter relation, select and script
1 parent 7e0ca34 commit f9f139f

File tree

24 files changed

+633
-296
lines changed

24 files changed

+633
-296
lines changed

‎packages/core/entities/collection.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import uuid from 'uuid-random'
33
export interface CollectionColumn {
44
id: string
55
field: string
6-
type: 'text' | 'number'
6+
type: 'text' | 'number' | 'select' | 'relation' | 'script'
77
label: string
88
readonly?: boolean
99
[key: string]: any

‎packages/desktop/assets/main.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.fade-enter-active,
44
.fade-leave-active {
5-
transition: opacity 0.2s ease;
5+
transition: opacity 0.1s ease;
66
}
77

88
.fade-enter-from,
@@ -12,7 +12,7 @@
1212

1313
.slide-down-enter-active,
1414
.slide-down-leave-active {
15-
transition: all 0.2s ease;
15+
transition: all 0.1s ease;
1616
}
1717

1818
.slide-down-enter-from,
@@ -23,7 +23,7 @@
2323

2424
.slide-left-enter-active,
2525
.slide-left-leave-active {
26-
transition: all 0.2s ease;
26+
transition: all 0.1s ease;
2727
}
2828

2929
.slide-left-enter-from,

‎packages/desktop/components/is-select.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const displayLabel = computed(() => {
130130
131131
const option = props.options.find((o) => o[props.valueKey] === model.value)
132132
133-
return option[props.labelKey]
133+
return option ? option[props.labelKey] : option
134134
})
135135
136136
function onShowMenu(value: boolean) {
@@ -144,6 +144,7 @@ function onShowMenu(value: boolean) {
144144
:model-value="menu"
145145
max-height="132"
146146
v-bind="bindings.menu"
147+
close-on-content-click
147148
@update:model-value="onShowMenu"
148149
>
149150
<template #activator="{ on }">

‎packages/desktop/components/v-btn.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
import { computed } from 'vue'
33
44
const props = defineProps({
5+
type: {
6+
type: String,
7+
default: 'button',
8+
},
59
size: {
610
type: String,
711
default: 'md',
@@ -83,7 +87,13 @@ const classes = computed(() => {
8387
})
8488
</script>
8589
<template>
86-
<component :is="to ? 'router-link' : 'button'" :to="to" :class="classes" :disabled="disabled">
90+
<component
91+
:is="to ? 'router-link' : 'button'"
92+
:to="to"
93+
:class="classes"
94+
:disabled="disabled"
95+
:type="type"
96+
>
8797
<div v-if="loading" class="absolute flex items-center justify-center">
8898
<is-icon name="spinner" class="animate-spin" />
8999
</div>

‎packages/desktop/components/v-card-head.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
1+
<script lang="ts" setup>
2+
defineProps({
3+
padding: {
4+
type: Boolean,
5+
default: false,
6+
},
7+
})
8+
</script>
19
<template>
2-
<div class="w-full py-3 flex items-center border-b border-lines">
10+
<div
11+
class="w-full py-3 flex items-center border-b border-lines"
12+
:class="[padding ? 'px-4' : '']"
13+
>
314
<slot />
415
</div>
516
</template>

‎packages/desktop/components/v-card.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
3+
import { toCssMeasurement } from '@/composables/utils'
34
45
const props = defineProps({
56
width: {
67
type: String,
7-
default: null,
8+
default: '100%',
89
},
910
height: {
1011
type: String,
@@ -39,7 +40,7 @@ const colors = computed(() => {
3940
4041
// classes
4142
const classes = computed(() => {
42-
const result: string[] = ['w-full']
43+
const result: string[] = []
4344
4445
if (props.color) {
4546
result.push(colors.value[props.color])
@@ -51,17 +52,17 @@ const classes = computed(() => {
5152
// style
5253
5354
const style = computed(() => {
54-
const result: string[] = []
55+
const result: any = {}
5556
5657
if (props.width) {
57-
result.push(`width: ${props.width}px`)
58+
result.width = toCssMeasurement(props.width)
5859
}
5960
6061
if (props.height) {
61-
result.push(`height: ${props.height}px`)
62+
result.height = toCssMeasurement(props.height)
6263
}
6364
64-
return result.join(';')
65+
return result
6566
})
6667
</script>
6768

‎packages/desktop/components/v-dialog.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<script lang="ts">
2+
export default { inheritAttrs: false }
3+
</script>
14
<script setup lang="ts">
25
import { computed, ref } from 'vue'
36
import { useVModel } from 'vue-wind/composables/v-model'

‎packages/desktop/components/v-table.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts" setup>
22
import { computed, ref } from 'vue'
3+
import { toCssMeasurement } from '@/composables/utils'
34
45
interface ColumnPadding {
56
top?: number
@@ -49,15 +50,15 @@ const parsedColumns = computed(() =>
4950
const style: any = {}
5051
5152
if (column.width) {
52-
style.width = `${column.width}px`
53+
style.width = toCssMeasurement(column.width)
5354
}
5455
5556
if (column.padding?.left) {
56-
style['padding-left'] = `${column.padding?.left}px`
57+
style['padding-left'] = toCssMeasurement(column.padding.left)
5758
}
5859
5960
if (column.padding?.right) {
60-
style['padding-right'] = `${column.padding?.right}px`
61+
style['padding-right'] = toCssMeasurement(column.padding.right)
6162
}
6263
6364
return {

‎packages/desktop/components/v-td.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ defineProps({
99
<template>
1010
<td
1111
class="text-left border-b border-r last:border-r-0 border-lines"
12-
:class="[noPadding ? 'p-0' : 'p-2']"
12+
:class="[noPadding ? 'p-0' : 'py-2 px-4']"
1313
>
1414
<slot></slot>
1515
</td>

‎packages/desktop/components/v-th.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<th
3-
class="text-left p-2 border-b border-r last:border-r-0 relative border-lines transition-all"
3+
class="text-left py-2 px-4 border-b border-r last:border-r-0 relative border-lines transition-all"
44
>
55
<slot></slot>
66
</th>

‎packages/desktop/composables/utils.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,19 @@ export function waitFor(cb: () => boolean, timeout = 500) {
2828
}, 50)
2929
})
3030
}
31+
32+
export function toCssMeasurement(value: string | number) {
33+
if (typeof value === 'number') {
34+
return `${value}px`
35+
}
36+
37+
if (/(%|px|deg)/.test(value)) {
38+
return value
39+
}
40+
41+
if (/[0-9]/.test(value)) {
42+
return `${value}px`
43+
}
44+
45+
return value
46+
}

‎packages/desktop/electron/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ app.whenReady().then(async () => {
4646

4747
const window = new BrowserWindow({
4848
...bounds,
49-
title: 'Main window',
49+
title: 'Index-san',
5050
autoHideMenuBar: true,
5151
webPreferences: {
5252
preload: path.join(__dirname, './preload.js'),

‎packages/desktop/i18n/en-US.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export default {
5656
search: 'Search',
5757
section: 'Section',
5858
apply: 'Apply',
59+
operation: 'Operation',
5960
errors: {
6061
workspaceNotFound: '@:workspace not found: {0}',
6162
collectionNotFound: '@:collection not found: {1}',

‎packages/desktop/modules/collection/components/CColumn.vue

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ const props = defineProps({
1919
},
2020
})
2121
22-
const types = [
22+
// type options
23+
24+
interface Option {
25+
label: string
26+
value: CollectionColumn['type']
27+
}
28+
29+
const types: Option[] = [
2330
{
2431
label: 'Text',
2532
value: 'text',
@@ -32,23 +39,24 @@ const types = [
3239
label: 'Select',
3340
value: 'select',
3441
},
35-
{
36-
label: 'Entry',
37-
value: 'entry',
38-
},
42+
// {
43+
// label: 'Entry',
44+
// value: 'entry',
45+
// },
3946
{
4047
label: 'Relation',
4148
value: 'relation',
4249
},
43-
{
44-
label: 'Script',
45-
value: 'script',
46-
},
50+
// {
51+
// label: 'Script',
52+
// value: 'script',
53+
// },
4754
]
4855
4956
const dialog = ref(false)
5057
51-
const payload = ref({
58+
const payload = ref<Omit<CollectionColumn, ''>>({
59+
id: '',
5260
label: '',
5361
field: '',
5462
type: 'text',
@@ -58,7 +66,7 @@ const payload = ref({
5866
displayField: undefined,
5967
})
6068
61-
const icons = {
69+
const icons: Record<CollectionColumn['type'], any> = {
6270
text: 'font',
6371
number: 'hashtag',
6472
select: 'fa-regular fa-square-caret-down',

‎packages/desktop/modules/collection/components/CFilter.vue

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@
22
import { CollectionColumn } from '@/../core/entities/collection'
33
import { computed } from 'vue'
44
import { useVModel } from 'vue-wind/composables/v-model'
5+
import { Filter } from '../composables/filter'
56
67
import CFilterNumber from './CFilterNumber.vue'
8+
import CFilterRelation from './CFilterRelation.vue'
9+
import CFilterScript from './CFilterScript.vue'
10+
import CFilterSelect from './CFilterSelect.vue'
711
import CFilterText from './CFilterText.vue'
812
913
// Props & Emits
1014
1115
const props = defineProps({
1216
modelValue: {
13-
type: Object,
17+
type: Object as () => Filter,
1418
default: null,
1519
},
1620
columns: {
@@ -28,45 +32,34 @@ const model = useVModel(props, 'modelValue', emit)
2832
const components: Record<CollectionColumn['type'], any> = {
2933
text: CFilterText,
3034
number: CFilterNumber,
35+
relation: CFilterRelation,
36+
select: CFilterSelect,
37+
script: CFilterScript,
3138
}
3239
33-
const selectedColumn = computed(() => props.columns.find((c) => c.id === model.value.column))
40+
const column = computed(() => props.columns.find((c) => c.id === model.value.columnId))
3441
</script>
3542
<template>
36-
<is-list-item align="end" class="gap-x-4">
37-
<is-select
38-
v-model="model.column"
39-
:options="columns"
40-
label-key="label"
41-
readonly
42-
value-key="id"
43-
class="max-w-[150px]"
44-
/>
43+
<v-card v-if="column" class="gap-x-4 flex-wrap">
44+
<v-card-content>
45+
<v-card class="border border-lines">
46+
<v-card-head padding>
47+
<v-card-title class="mr-auto">
48+
{{ column.label }}
49+
</v-card-title>
4550

46-
<is-menu v-if="selectedColumn" offset-y>
47-
<template #activator="{ on }">
48-
<v-btn size="none" class="h-9 w-9 rounded-full" color="b-secondary" v-bind="on">
49-
<is-icon name="cog" />
50-
</v-btn>
51-
</template>
52-
53-
<v-card color="b-secondary" class="overflow-x-auto rounded mt-2">
51+
<v-btn color="danger" text size="sm" @click="$emit('destroy')">
52+
<is-icon name="trash" />
53+
</v-btn>
54+
</v-card-head>
5455
<v-card-content class="flex flex-wrap">
5556
<component
56-
:is="components[selectedColumn.type] || components.text"
57+
:is="components[column.type] || components.text"
5758
v-model="model"
59+
:column="column"
5860
/>
5961
</v-card-content>
6062
</v-card>
61-
</is-menu>
62-
63-
<v-btn
64-
size="none"
65-
class="h-9 w-9 rounded-full"
66-
color="b-secondary"
67-
@click="$emit('destroy')"
68-
>
69-
<is-icon name="trash" />
70-
</v-btn>
71-
</is-list-item>
63+
</v-card-content>
64+
</v-card>
7265
</template>

0 commit comments

Comments
 (0)