I would like to make my Keystone List object editable only if the object is not published. Here's my reduced List definition:
var Campaign = new keystone.List('Campaign', {
nodelete: true,
track: {
createdAt: true,
},
});
Campaign.add({
...,
publish: {
type: Types.Boolean,
required: false,
initial: false,
dependsOn: {
publishedOn: '',
},
},
publishedOn: {
type: Types.Datetime,
label: 'Published On',
hidden: true,
},
});
Is it possible to set noedit only if publishedOn is not null? I'm trying to prevent the object from being modified after it's "published", and am coming up short on examples.
The noedit property for a list or field is part of the model definition, and not part of the definition of an individual item. There is no way to mark a single item as uneditable in the admin UI unless you want to apply it to the field or model as a whole.
If you are less worried about clarity, and more worried about ensuring it cannot be edited, you could try the following:
Campaign.schema.post('init', function () {
if (this.published) this.invalidate('Published items cannot be edited');
});
This will cause an error to be thrown if you attempt to save the item once it is published.
While you could use dependsOn: { published: { $exists: true } } to filter fields, this would hide the information.
Interestingly, I was able to make the publish field simply check itself:
Campaign.add({
...,
publish: {
type: Types.Boolean,
required: false,
initial: false,
dependsOn: {
publish: false,
},
},
...,
});
and now it only shows if publish is false, which works exactly as I hoped it would.
Related
I have a Category model set in schema.ts as follows:
Category: list({
fields: {
name: text(),
type: select({
options: [
{ label: "MultipleChoice", value: "MultipleChoice" },
{ label: "Range", value: "Range" },
],
defaultValue: "...",
isRequired: true,
isUnique: true,
ui: { displayMode: "segmented-control" },
}),
from: integer(),
to: integer(),
options: text()
},
})
And this renders these components in the admin UI:
I'd like to show from and to fields only when Range is selected (hiding options field) and the other way around when MultipleChoice is selected. Is there a way to achieve that with Keystone Next?
I also tried another approach splitting the category types in different models and then relate them somehow with the Category model, but I'm not sure how to do so. Something like:
CategoryRange: list({
ui: {
isHidden: true,
},
fields: {
from: integer(),
to: integer(),
},
}),
CategoryMultipleChoice: list({
ui: {
isHidden: true,
},
fields: {
options: text(),
},
})
Conditional fields were supported in Keystone 4. They haven't been brought forward to Keystone 6 (aka. "Next") yet but they're on the roadmap. I'd expect support for them to arrive in the next few months.
Right now, in Keystone 6, probably the best you could do would be to create a custom field type that collected the "type" and "from/to" fields together. This would let you define an interface in the Admin UI that implemented whatever presentation rules you liked.
I have some odata-enabled endpoints that I'm looking to wire up to data tables in vue and have them automatically support server-side sorting, filtering and paging. The grid in Telerik's Kendo UI supports odata to the point where you tell the component that the data source type is odata and it automatically "just works" (https://demos.telerik.com/kendo-ui/grid/remote-data-binding) because odata is a well-defined standard.
I'm wondering if there is support for odata in other common vue-specific UI frameworks like vuetify. I've looked at vuetify specifically and it does seem to support server-side operations, but it's not clear to me how much custom logic I'm going to need to write in order to use odata since I haven't been able to find any specific examples.
Here is the source from the example linked above that shows how clean it is to wire up declaritively without any additional boilerplate logic:
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
Vuetify doesn't seem to support odata yet, so your best bet is probably to write a client-side js solution.
Probably using one of these libraries.
O.js seems to be rather simple.
I am trying to implement nested categories for Post model.
What I have:
Post.add({
title: { type: String, required: true },
state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },
author: { type: Types.Relationship, ref: 'User', index: true },
publishedDate: { type: Types.Date, index: true, dependsOn: { state: 'published' } },
content: {
extended: { type: Types.Html, wysiwyg: true, height: 300 },
},
categories: { type: Types.Relationship, ref: 'PostCategory', index: true }
});
And category
PostCategory.add({
name: { type: String, required: true },
subCategories: { type: Types.TextArray }
});
Now I can add a list of subcategories to each category.
What I can't do is to display subcategories while creating a post. Also if I change category I need to load sub categories related to selected category.
My plan was to achieve that with watch functionality but it seems only works on save.
Another thing I was thinking about was to add subcategories as relationship, see ref:
categories: { type: Types.Relationship, ref: 'PostCategory.subCategories', index: true }
But it isn't working as well.
So, if anybody has any ideas how to achieve that, please share.
Thanks.
P.S. Don't hesitate to ask any additional information.
I created nested categories by creating a new model 'PostSubCategory' that allows the user to assign the parent category to the child category when they create the child category:
var keystone = require('keystone');
var Types = keystone.Field.Types;
/**
* PostSubCategory Model
* ==================
*/
var PostSubCategory = new keystone.List('PostSubCategory', {
autokey: { from: 'name', path: 'key', unique: true },
});
PostSubCategory.add({
name: {
type: String,
required: true
},
parentCategory: {
type: Types.Relationship,
ref: 'PostCategory',
required: true,
initial: true
}
});
PostSubCategory.relationship({ ref: 'Post', path: 'subcategories' });
PostSubCategory.register();
Then in my Post.js, I add a field to choose a subcategory with a filter on that field to only select from subcategories that are children of the parent category selected:
subcategory: {
type: Types.Relationship,
ref: 'PostSubCategory',
many: false,
filters: { parentCategory: ':categories' }
}
I'm not sure how well this would work for deeper nesting, and I do have an issue in the edit Post admin ui where changing the parent category for a post doesn't update the available subcategories to choose from until you save and refresh. But it got me far enough along for getting parent/child categories to work.
I'm trying to group this object by name, so in fine I would be able to distinguish all names 'duval' from 'lulu':
const groupName = R.groupBy(R.prop('name'), [data]);
But this won't work on:
let data = {
benj: {
content : undefined,
name : 'duval',
complete: false,
height : 181
},
joy: {
content : undefined,
name : 'duval',
complete: true
},
kaori: {
content : undefined,
name : 'lulu',
complete: true
},
satomi: {
content : undefined,
name : 'lulu',
complete: true
}
}
Should I change the format of my object, or is there a way to do it in this kind of object ?
Passing [data] to groupBy is not going to help much. You want to group a list containing a single item. The fact that that item has properties like 'bennj' and 'joy' rather than 'name' is only part of the issue.
You can get something that will work, I think, if this output would be useful:
{
duval: {
benj: {
content: undefined,
name: "duval",
complete: false,
height: 181
},
joy: {
content: undefined,
name: "duval",
complete: true
}
},
lulu: {
kaori: {
content: undefined,
name: "lulu",
complete: true
},
satomi: {
content: undefined,
name: "lulu",
complete: true
}
}
}
But it's a bit more involved:
compose(map(fromPairs), groupBy(path([1, 'name'])), toPairs)(data)
toPairs converts the data to a list of elements something like this:
[
"benj",
{
complete: false,
content: undefined,
height: 181,
name: "duval"
}
]
then groupBy(path[1, 'name']) does the grouping you're looking to do, by finding the name on the object at index 1 in this list.
And finally map(fromPairs) will turn these lists of lists back into objects.
It's not a particularly elegant solution, but it's fairly typical when you want to do list processing on something that's not really a list.
I want to create a Category model that can hold another category, but having a problem with reference field that I can set my current category to it self
Any suggestions how to achieve hierarchical categories?
Does KeystoneJS have filter like 'not equal'?
In other hand, maybe I can set default reference field to it self and it will be like a root...
My current code below:
var keystone = require('keystone'),
Types = keystone.Field.Types;
var PageCategory = keystone.List('PageCategory', {
map: { name: 'name' },
autokey : { from: 'name', path: 'key'}
});
PageCategory.add({
name: { type: String, required: true, unique: true},
image: { type: Types.CloudinaryImage, label: "Category Image"},
description : { type: Types.Html, wysiwyg: true},
parent: { type: Types.Relationship, ref: "PageCategory", label: "Parent category"}
});
PageCategory.relationship({ ref: "PageCategory", path: "parent"});
PageCategory.register();
I think you have misunderstood how Model.relationship() works.
It has three options:
path, this is the "virtual" field name that will hold the values
ref, this is the model that we reference
refPath, this is the field in the referenced model that we populate path with
I think something in line with this will work for you
PageCategory.relationship({ ref: "PageCategory", path: "children", refPath: "parent"});