Skip to content

Commit 00eef5c

Browse files
szczepanmasnyszczepanmasny
authored
Merge pull request #52 from what-crud/issue/32_add_cms_example
Issue/32 add cms example
2 parents cbb4c0c + ca9d48a commit 00eef5c

File tree

12 files changed

+834
-34
lines changed

12 files changed

+834
-34
lines changed

‎docs/guide/components/crud.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
|prefix|-|`String`|`false`|null|
1414
|path|-|`String`|`false`|null|
1515
|paths|-|`Object`|`false`|-|
16-
|fieldsInfo|-|`Array`|`false`|-|
16+
|fieldsInfo|Array of objects ( [See list of available properties](/guide/crud/field-options.html) ) |`Array`|`false`|-|
1717
|detailsTitle|-|`String`|`false`|-|
1818
|pageTitle|-|`String`|`false`|-|
1919
|editButton|-|`Boolean`|`false`|crud.editButton || null|

‎docs/guide/crud/field-options.md

+112-23
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,81 @@
11
# Field options
22

3-
## `text`
4-
*String*. Field label (item details) and header (table). You can hardcode it or use i18n.
3+
## `async`
4+
*Object*, default: **false**. Property can be specified if field `type` is **select**. Information whether the list is asynchronyous.
5+
6+
## `apiObject`
7+
*Object*, optional. If the field to be displayed in the table is not directly in the downloaded object, but is nested inside the object or the field is to be displayed in an unusual way, then the display method can be specified here.\
8+
Parameters:
9+
- `name`: eg. 'car_brand.name',
10+
- `functions`: array of functions used to modify given field. You can define your functions in **src/helpers/functions.js** file.
511

612
## `column`
713
*String*. The column in the table referenced by the field.
814

9-
## `name`
10-
*String*. If `apiObject.name` is defined, you must define custom field name. Eg. if table `column` is *car_brand_id*, and its `apiObject.name` is *car_brand.name*, the name may be *car_brand* or *car_brand_name*.
11-
12-
## `table`
13-
*Boolean*, default: **true**. Responsible for displaying the field in the CRUD table.
15+
## `create`
16+
*Boolean*, default: **true**. Responsible for displaying the field in the creating item form.
1417

1518
## `details`
1619
*Boolean*, default: **true**. Responsible for displaying the field in the item details.
1720

18-
## `create`
19-
*Boolean*, default: **true**. Responsible for displaying the field in the creating item form.
21+
## `grid`
22+
*String*, optional. Vuetify grid used in extended details. This parameter is used to determine the field width on different screens.
2023

2124
## `multiedit`
2225
*Boolean*, default: **true**. Responsible for displaying the field in the multiple update form.
2326

24-
## `apiObject`
25-
*Object*, optional. If the field to be displayed in the table is not directly in the downloaded object, but is nested inside the object or the field is to be displayed in an unusual way, then the display method can be specified here.\
27+
## `name`
28+
*String*. If `apiObject.name` is defined, you must define custom field name. Eg. if table `column` is *car_brand_id*, and its `apiObject.name` is *car_brand.name*, the name may be *car_brand* or *car_brand_name*.
29+
30+
## `list`
31+
*Object*, optional. Property must be defined if field `type` is **select**.
32+
2633
Parameters:
27-
- `name`: eg. 'car_brand.name',
28-
- `functions`: array of functions used to modify given field. You can define your functions in **src/helpers/functions.js** file.
34+
- `value`: primary key in select recordset.
35+
- `text`: column with data to be displayed in the select field. If text is the nested property od `data` object then use dots to concatenate elements, eg. `position.person.email`.
36+
- `complexName`: If record's label must contain multiple fields, use this property instead of `text`. It works the same as `text` but fields must be placed in array:
37+
```js
38+
{
39+
value: 'id',
40+
text: 'complexName',
41+
complexName: ['person.fullname', 'company.common_name', 'name'],
42+
data: []
43+
}
44+
```
45+
- `data`: array of list elements. Array item should contain keys from `value` and `text` property. Example:
46+
```js
47+
{
48+
value: 'name',
49+
text: 'label',
50+
data: [
51+
{
52+
name: 'input',
53+
label: 'Input'
54+
},
55+
{
56+
name: 'textarea',
57+
label: 'Textarea'
58+
},
59+
{
60+
name: 'file',
61+
label: 'File'
62+
}
63+
]
64+
}
65+
```
66+
67+
::: warning WARNING
68+
If `url` property has been set, `data` content will be ignored and it will be uploaded from API.
69+
:::
70+
71+
## `stringId`
72+
*Boolean*, default **false**. Property can be specified if field `type` is **select**. Information, whether this field is non-numeric ID.
73+
74+
## `table`
75+
*Boolean*, default: **true**. Responsible for displaying the field in the CRUD table.
76+
77+
## `text`
78+
*String*. Field label (item details) and header (table). You can hardcode it or use i18n.
2979

3080
## `type`
3181
*String*, optional. Type of field. Must be defined if `details` is set to **true**. You may use following types:
@@ -37,18 +87,57 @@ Parameters:
3787
- datetime,
3888
- textarea,
3989
- file,
40-
- select,
90+
- select (this field uses `list`, `url`, `stringId` and `async` property),
4191
- textarea,
4292
- datePicker,
4393
- richTextBox,
44-
- checkbox
94+
- checkbox,
95+
- dynamic (this field uses `typeField` property),
4596

46-
## `list`
47-
*Object*, optional. Field must be defined if field `type` is **select**.\
48-
Parameters:
49-
- `value`: primary key in select recordset,
50-
- `text`: column with data to be displayed in the select field,
51-
- `data`: [] (empty array)
97+
## `typeField`
98+
*String*, optional. Property must be defined if field `type` is **dynamic**. This field contains `name` of another field, which value determines this field's type. Example:
99+
```js
100+
fieldsInfo () {
101+
return [
102+
{
103+
type: 'select',
104+
list: {
105+
value: 'name',
106+
text: 'label',
107+
data: [
108+
{
109+
name: 'input',
110+
label: this.$t('fieldTypes.input')
111+
},
112+
{
113+
name: 'textarea',
114+
label: this.$t('fieldTypes.textarea')
115+
},
116+
{
117+
name: 'file',
118+
label: this.$t('fieldTypes.file')
119+
}
120+
]
121+
},
122+
stringId: true,
123+
column: 'type',
124+
text: this.$t('fields.type'),
125+
name: 'type'
126+
},
127+
{
128+
type: 'dynamic',
129+
typeField: 'type',
130+
column: 'value',
131+
text: this.$t('fields.value'),
132+
name: 'value'
133+
}
134+
]
135+
}
136+
```
52137

53-
## `grid`
54-
*String*, optional. Vuetify grid used in extended details. This parameter is used to determine the field width on different screens.
138+
## `url`
139+
*String*, optional. Path to resource with list items. Property can be specified if field `type` is **select**.
140+
141+
::: tip INFO
142+
If `url` and `path.default` property has been set in **src/config/api.js** file, only the rest of path is required.
143+
:::

‎examples/cms/routes/app/routes/cms/routes/settings/Index.vue

+3
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ export default {
6363
{
6464
type: 'dynamic',
6565
typeField: 'type',
66+
textModes: {
67+
file: 'file'
68+
},
6669
column: 'value',
6770
text: this.$t('fields.value'),
6871
name: 'value'

‎examples/cms/routes/app/routes/store/router.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
1+
import Sections from './routes/sections/Index.vue'
2+
import Products from './routes/products/Index.vue'
3+
import TransactionProducts from './routes/transaction-products/Index.vue'
4+
import Transactions from './routes/transactions/Index.vue'
5+
import Customers from './routes/customers/Index.vue'
16

27
let storeRoutes = [
3-
8+
{
9+
path: 'sections',
10+
name: 'store-sections',
11+
component: Sections
12+
},
13+
{
14+
path: 'products',
15+
name: 'store-products',
16+
component: Products
17+
},
18+
{
19+
path: 'transaction-products',
20+
name: 'store-transaction-products',
21+
component: TransactionProducts
22+
},
23+
{
24+
path: 'transactions',
25+
name: 'store-transactions',
26+
component: Transactions
27+
},
28+
{
29+
path: 'customers',
30+
name: 'store-customers',
31+
component: Customers
32+
}
433
]
534

635
export default storeRoutes

‎examples/cms/routes/app/routes/store/routes/customers/Index.vue

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<crud
3+
:prefix="prefix"
4+
:path="path"
5+
:page-title="pageTitle"
6+
:fields-info="fieldsInfo"
7+
:details-title="$t('detailsTitle')"
8+
deleteMode="hard"
9+
>
10+
</crud>
11+
</template>
12+
13+
<script>
14+
import Crud from '@/utils/crud/components/Crud.vue'
15+
16+
export default {
17+
data () {
18+
return {
19+
prefix: 'crud/store',
20+
path: 'customers',
21+
pageTitle: 'store.customers'
22+
}
23+
},
24+
computed: {
25+
fieldsInfo () {
26+
return [
27+
{
28+
text: this.$t('fields.id'),
29+
name: 'id',
30+
details: false
31+
},
32+
{
33+
type: 'input',
34+
column: 'firstname',
35+
text: this.$t('fields.firstname'),
36+
name: 'firstname',
37+
multiedit: false
38+
},
39+
{
40+
type: 'input',
41+
column: 'lastname',
42+
text: this.$t('fields.lastname'),
43+
name: 'lastname',
44+
multiedit: false
45+
},
46+
{
47+
type: 'checkbox',
48+
column: 'company',
49+
text: this.$t('fields.company'),
50+
name: 'company',
51+
apiObject: {
52+
name: 'company',
53+
functions: ['boolean']
54+
},
55+
textMode: 'html',
56+
required: false
57+
},
58+
{
59+
type: 'input',
60+
column: 'registration_number',
61+
text: this.$t('fields.registration_number'),
62+
name: 'registration_number',
63+
multiedit: false,
64+
required: false
65+
},
66+
{
67+
type: 'input',
68+
column: 'phone',
69+
text: this.$t('fields.phone'),
70+
name: 'phone',
71+
multiedit: false,
72+
required: false
73+
},
74+
{
75+
type: 'input',
76+
column: 'email',
77+
text: this.$t('fields.email'),
78+
name: 'email',
79+
multiedit: false
80+
},
81+
{
82+
type: 'input',
83+
column: 'street',
84+
text: this.$t('fields.street'),
85+
name: 'street',
86+
multiedit: false
87+
},
88+
{
89+
type: 'input',
90+
column: 'zip_code',
91+
text: this.$t('fields.zip_code'),
92+
name: 'zip_code',
93+
multiedit: false
94+
},
95+
{
96+
type: 'input',
97+
column: 'city',
98+
text: this.$t('fields.city'),
99+
name: 'city'
100+
},
101+
{
102+
type: 'input',
103+
column: 'comments',
104+
text: this.$t('fields.comments'),
105+
name: 'comments',
106+
required: false
107+
}
108+
]
109+
}
110+
},
111+
components: {
112+
Crud
113+
},
114+
i18n: {
115+
messages: {
116+
pl: {
117+
detailsTitle: 'Post',
118+
fields: {
119+
id: 'Id',
120+
firstname: 'Imię',
121+
lastname: 'Nazwisko',
122+
company: 'Firma',
123+
registration_number: 'Nr ident.',
124+
phone: 'Tel.',
125+
email: 'E-mail',
126+
street: 'Ulica',
127+
zip_code: 'Kod pocztowy',
128+
city: 'Miejscowość',
129+
comments: 'Komentarze'
130+
}
131+
},
132+
en: {
133+
detailsTitle: 'Post',
134+
fields: {
135+
id: 'Id',
136+
firstname: 'Firstname',
137+
lastname: 'Lastname',
138+
company: 'Company',
139+
registration_number: 'Registr. no',
140+
phone: 'Phone',
141+
email: 'E-mail',
142+
street: 'Street',
143+
zip_code: 'Zip code',
144+
city: 'City',
145+
comments: 'Comments'
146+
}
147+
}
148+
}
149+
}
150+
}
151+
152+
</script>

0 commit comments

Comments
 (0)