Update data when property is updated - vue-component

i have a component with a property "A" and a data property "a" set when "A" is set
{ props:["A"], data() { return { a: this.A } }
I also have a mounted event that would set "a" based on a _route.params.a thus data property "a" can be set via "A" or "_route.params.a"
My question is.... IF prop "A" is updated why would it not update "a"? What can be done to have "a" updated by either methods?

The way you're defining a:
...
data() {
return {
a: this.A
}
}
...
is only initializing a with A's value - it is not a reference to A. Thus when A changes the change is not propagated to a. If you wanted that, you could define a as a computed property ( a() { return this.A; }) and the data would flow as you expect.
If you want to set a based on the prop and/or route params, you should probably watch their values and set a accordingly.

Related

Create or Read item in DynamoDb

I'm trying to read an item with ID of X from DynamoDB (Using Appsync graphql) and I want it to create a default item if there is none.
This seems like it should be a normal use case. But the solutions I've tried have all been pretty bad:
I tried to create a Pipeline resolver that would first get the item, then in a second function create an item if there was no item in the result from the previous function. This had with returning the read item.
I tried making a PutAction with the condition that an item with this ID doesn't work. This does what I need it to, but I can't change the response from an error warning, no matter what I do to the response mapping template.
So how does one efficiently create a "read - or create if it does not exist" resolver for DynamoDb?
It turns out that I was close to the solution.
According to this documentation: https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-reference-dynamodb.html#aws-appsync-resolver-mapping-template-reference-dynamodb-condition-handling
Create a putItem resolver that conditionally checks if there is an item with the same unique identifier (in DynamoDB that's usually a primary key and a sort key combination)
If the resolver determines the read object to not be different from the intended new object a warning will not be sent. So we can simply remove ALL fields from the comparison.
Example:
{
"version" : "2017-02-28",
"operation" : "PutItem",
"key" : {
"id" : { "S" : "${ctx.args.id}" }
},
"condition" : {
"expression" : "attribute_not_exists(id)",
"equalsIgnore": [ "__typename", "_version", "_lastChangedAt", "_createdAt", "name", "owner"]
},
"attributeValues": {
"name": { "S" : "User Username" }
}
}

In Fullcalendar, is it possible to prevent event 'foo' to overlap with event 'bar', but allow it to overlap with event 'quux'?

Say I have 3 event types in Fullcalendar, 'foo', 'bar' and 'quux'. 'foo' and 'bar' can not overlap eachother, however 'quux' may overlap both 'foo' and 'bar'.
Is this possible? If so, how do I achieve this?
https://fullcalendar.io/docs/eventOverlap says it is possible to prevent overlap, however this prevents overlap for the eventtype completely
The eventOverlap documentation page you linked to says
"If given a function, the function will be called every time there is
a pair of intersecting events, whether upon a user drag or resize. The
function must return true if the overlap should be allowed and false
otherwise"
So within that function you can define any logic you like to decide whether the overlap is allowed, including checking the properties of the event. So you could write code which checks whether the two events are "foo" and "bar" or not, and then returns a response accordingly.
Naive example:
eventOverlap: function(stillEvent, movingEvent) {
if (
(stillEvent.title == "foo" && movingEvent.title == "bar")
||
(stillEvent.title == "bar" && movingEvent.title == "foo")
)
{
return false;
}
return true;
}

How to set columnOption looping throw all column?

How to set the columnOptions looping through all in angular devexpress module?
at present I do one by one like :
onInitialized(e) {
e.component.columnOption("Id", {
allowHeaderFiltering : false -> 1
})
e.component.columnOption("Name", {
allowHeaderFiltering : false -> 2
})
e.component.columnOption("SaleAmount", {
editorOptions: {
format: "currency",
showClearButton: true
}
});
}
How to look all column and set the columnOptionon each?
If you need to initialize a column with default settings (I believe you need to do this since you provided the onInitialized event handler code), use the customizeColumns callback function. Its parameter is an array of all columns in the grid. Thus, you can traverse through all columns as you do in a regular array.
Since customizeColumns is a callback function, use square brackets to assign a function to it in Angular as described in the Callback Functions section:
*.component.html
<dx-data-grid [customizeColumns]="customizeColumns">
</dx-data-grid>
*.component.ts
export class AppComponent {
customizeColumns (columns) {
columns.forEach(c => c.width = 100);
}
}

Deleting all files in a firebase folder?

The Firebase documentation on deleting data says:
Delete data
The simplest way to delete data is to call remove() on a reference to the location of that data.
You can also delete by specifying null as the value for another write operation such as set() or update(). You can use this technique with update() to delete multiple children in a single API call.
can anybody explain to me what they mean by the last line I think is could help me delete all files in a firebase folder?
In Firebase:
dataRef.remove() is strictly equivalent to dataRef.set(null)
dataRef.child('foo').remove() is strictly equivalent to dataRef.update({ foo: null })
That means that setting or updating to null will effectively remove the property.
Updates can be used for removing multiple properties in that way:
Consider this example Firebase Object:
exampleData = {
foo: 'anyValue',
bar: 'otherValue',
baz: {
aProp: true,
anotherProp: false
}
}
The following
db.ref('/exampleData').update( { bar: null, 'baz/aProp': null })
will result in the following object:
exampleData = {
foo: 'anyValue',
baz: {
anotherProp: false
}
}
So you can use one update instead of multiple remove (or set) to delete several properties.
If you have this in your database:
users: {
user9266622: {
id: 9266622,
name: "SylvainC"
},
user209103: {
id: 209103,
name: "Frank van Puffelen"
}
}
Then you can delete a specific property with something like:
firebase.database().ref("/users/user209103/name").remove();
You can remove an entire branch by calling remove() on the top of that branch. So to remove "my" entire profile:
firebase.database().ref("/users/user209103").remove();
I think this last snippet is what you're looking for: it removes /users/user209103 and everything under it.
The last line of the documentation you quote is about updating/removing multiple branches/properties in distinct locations in one call. For example, say you want to remove the id property from both profiles (since they're redundant). You can do this with:
firebase.database().ref().update({
"/users/user9266622/id": null,
"/users/user209103/id": null
});
This is called a multi-location update, since you're updating two locations by their full path.

Bind an observable property to a collection function?

I have a class Market which contains a collection of MarketUpdate objects called m_updates. For the UI I am using type-safe builders to create columns in a tableview like so:
override val root = tableview<Market> {
val sortedMarketList = SortedList<Market>(markets)
sortedMarketList.comparatorProperty().bind(this.comparatorProperty())
items = sortedMarketList
...
column("Strikes", Market::m_strikes)
...
The m_strikes property is just a SimpleIntegerProperty directly owned by a Market object. However, I need to be able to build columns like these:
...
column("Created At", Market::m_updates::first::m_time)
...
...
column("Last Update", Market::m_updates::last::m_time)
...
where m_time is a SimpleLongProperty owned by a MarketUpdate object. When a Market object is updated, a new MarketUpdate object is added to the end of the m_updates collection. This means that the binding needs to automatically transition from one object to another, and that the tableview needs to be notified and update itself to reflect the data in the new object. I think binding by way of the first() and last() functions of the collection as described above captures the idea in a very simple way, but it won't compile.
There are many properties like m_strikes and m_time. How can I achieve this gracefully?
If I understand your use case, what you want to do is to create an observable value that represents the time property for the first and last updates in a given Market object. To do that, you can create an objectBinding based on the updates list inside of each Market object, then extract the first() or last() element's timeProperty. In the following example, the TableView will update as soon as you augment the updates list in any Market object.
Bear in mind that the example requires each Market to have at least one update. If this isn't your case, make sure to handle null accordingly.
class Market {
val updates = FXCollections.observableArrayList<MarketUpdate>()
}
class MarketUpdate {
val timeProperty = SimpleObjectProperty(LocalDateTime.now())
}
class MarketList : View("Markets") {
val markets = FXCollections.observableArrayList<Market>()
val data = SortedFilteredList<Market>(markets)
override val root = borderpane {
prefWidth = 500.0
center {
tableview(markets) {
column<Market, LocalDateTime>("Created at", { objectBinding(it.value.updates) { first() }.select { it!!.timeProperty } })
column<Market, LocalDateTime>("Last update", { objectBinding(it.value.updates) { last() }.select { it!!.timeProperty } })
}
}
bottom {
toolbar {
// Click to add an update to the first entry
button("Add update").action {
markets.first().updates.add(MarketUpdate())
}
}
}
}
init {
// Add some test entries
markets.addAll(
Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) }
)
}
}
I've used a SortedFilteredList to make it easier to deal with sorting. The reason sort works here, is that the columns are actually represented by LocalDateTime values.
I hope this gives you some ideas :)

Resources