A small question about code cleanliness in angular reactive forms ...
In our forms, we often get fragments like this:
<div class="alert alert-danger"
*ngIf="formGroup.controls.openDateGroup.controls.preOpenDate.errors?.noFutureDateViolation; let errorInfo">
Pre open ({{errorInfo.value | febDate}}) date is not in the future
</div>
<div class="alert alert-danger"
*ngIf="formGroup.controls.openDateGroup.errors?.preOpenBeforeOpenViolation; let errorInfo">
Pre-open date ({{errorInfo.openDate | febDate}}) may not be after open date ({{errorInfo.preOpenDate | febDate}})
</div>
Is there a way to make this fragment cleaner? The reactive forms directives (formGroupName and formControlName) know on which level they are in the tree structure, so i think it should be possible to make these checks in a cleaner way ...
I like using this pattern:
1) Add a getter function to your component class for the field you want to check:
get openDateGroup() { return this.myFormGroup.get('openDateGroup'); }
2) Use in template like this:
<div class="alert alert-danger" *ngIf="openDateGroup.errors?.preOpenBeforeOpenViolation; let errorInfo">
Pre-open date ({{errorInfo.openDate | febDate}}) may not be after open date ({{errorInfo.preOpenDate | febDate}})
</div>
Related
I have a small problem in my laravel application. In my blade file, I would like to extract data from timestamp sql query result like using twig filter in Symfony.
Here is what I would like to do (here I used twig filter syntax)
<div class="day">{{ $post->published_at|date("d") }}</div>
<div class="month">{{ $post->published_at|date("m") }}</div>
How to do the samething in Larave blade file ?
Note that I tried to use the syntaxe below but it is not working for me
<div class="day">{{ $post->published_at->format('d') }}</div>
<div class="month">{{ $post->published_at->format('M') }}</div>
My project used laravel 8.
Is there somoene can help me please.
I think you can use Carbon.Here i assume your published_at format in db is timestamp or datetime
Carbon\Carbon::parse($post->published_at)->format('d')
As suggested by Alberto Sinigaglia in comment,If you cast published_at in your model like below then you can easily format without manually parsing.
In your model
protected $casts = [
'published_at'=>'date' // or datetime
];
then in your view
{{$post->published_at->format('d')}}
Use strtotime and date functions:
<?php
$time = strtotime($post->created_at);
$day = date('D', $time);
?>
<div class="day">{{ $day }}</div>
What i need is this:
return view('protected.standardUser.includes.documents',compact('documents'))->with('successMsg','Property is updated .');
The i could use it like this:
#if(Session::has('successMsg'))
<div class="alert alert-success"> {{ Session::get('successMsg') }}</div>
#endif
Any suggestion?
It looks like you're mixing two different ways of passing data to a view, which I'm guessing is the problem. The documentation seems to indicate it's a one or the other type situation. You also seem to be mixing up view()->with() and redirect()->with(), which work differently. Try this:
return view('protected.standardUser.includes.documents')->with('documents', $documents)->with('successMsg','Property is updated .');
And
#if(!empty($successMsg))
<div class="alert alert-success"> {{ $successMsg }}</div>
#endif
I order to use session stored flash messages, need to use following code into route method.
$request->session()->flash('successMsg','Saved succesfully!');
and then do
#if(Session::has('successMsg'))
<div class="alert alert-success"> {{ Session::get('successMsg') }}</div>
#endif
that's it
I'm new in Laravel and I was facing the same issue... I just tried as below::
\Session::flash('flash','Message info');
And it works!!
This works for me!
return view('protected.standardUser.includes.documents',compact('documents'),
['successMsg'=>'Property is updated .']);
just remove the with() and pass it in the return view()
I now and I can show a chart with dynamic data but a fixed number of chart. When I want to show a dynamic number of charts, something happens with ng-repeate. I said something happens, because if in mycharts[0].container.outerHTML I had the html that I need to show the graph (generated by the library), and if I copy and paste in a fixed place in my html, it will show the graph. My ng-repeate code looks as follow:
<div class="row" ng-controller="nodesDataTablesCtrl as nodeCtrl" >
<div ng-repeat="(index, node) in nodeCtrl.nodes" on-finish-render>
<div class="row">
<div class="col-lg-12">
<div id="{{ node.name }}_MEMORY" class="ct-chart snp_dynamic_chart"></div>
</div>
</div>
</div>
</div>
I found a solution, I'm not sure if is a bug of ng-repeate or Chartist.
In my ng-repeate I use nodeCtrl.nodes, which is an array that I receive from an http.get, my solution was create an range function, wich is, a function that receive a Number and return a list from 0 to n-1. Instead of passing the nodeCtrl.nodes which is updated everytime I make a request, I update a variable numberOfNodes with the range function, I mean, my new ng-repeat will be as follow:
<div ng-repeat="(index, node) in nodeCtrl.numberOfNodes" on-finish-render>
and in the success function of my request I do:
numberOfNodes = range(nodeCtrl.nodes.length)
which from my point of view make that ng-repeate don't update in some way internally.
Is important to se that programatically it shouldn't be differen but ...
I want to create an interactive scrumboard using Laravel and Vue.js containing multiple columns and within those columns multiple tickets.
These tickets are vue components with some nice edit / delete / (un)assign developer functionality and is used on other pages as well.
I have multiple columns defined like this:
<div id="scrumboard">
<div class="scrumboard__column">
<div class="scrumboard__title">Open</div>
<div class="scrumboard__tickets_wrapper" data-status="open">
#if( $sprint->hasTicketsOfStatus("open") )
#foreach( $sprint->getTicketsByStatus("open") as $ticket )
<ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
#endforeach
#endif
</div>
</div>
<div class="scrumboard__column">
<div class="scrumboard__title">In progress</div>
<div class="scrumboard__tickets_wrapper" data-status="progress">
#if( $sprint->hasTicketsOfStatus("progress") )
#foreach( $sprint->getTicketsByStatus("progress") as $ticket )
<ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
#endforeach
#endif
</div>
</div>
<div class="scrumboard__column">
<div class="scrumboard__title">Finished</div>
<div class="scrumboard__tickets_wrapper" data-status="closed">
#if( $sprint->hasTicketsOfStatus("closed") )
#foreach( $sprint->getTicketsByStatus("closed") as $ticket )
<ticket :data="{{ $ticket->getJsonData(true) }}"></ticket>
#endforeach
#endif
</div>
</div>
</div>
And as you can see it renders a ticket component for each ticket it finds for each column.
No i have turned the scrumboard__tickets_wrapper div's into jquery ui sortable lists which allows you to swap the tickets between columns.
<script>
$(document).ready(function(){
$(".scrumboard__tickets_wrapper").sortable({
connectWith: '.scrumboard__tickets_wrapper',
receive: function(event, ui){
console.log("Switched columns");
console.log(event);
console.log(ui);
var target = $(event.target);
target.css("background-color", "#ff0000");
}
});
</script>
Everything is working so far, now my question is: how do I dynamically call the "updateStatus()" function on a ticket component once the ticket is dropped into another list?
As you can see I can get the specific element being dropped and the sortable list it's been dropped into. So I know what the new status is by grabbing the data-status property of the wrapper + I know which element was dropped.
But how do I grab the instance of the ticket component in question and call the updateStatus function to save the new status?
Thanks in advance!
Screenshot of the scrumboard
Thanks David for pointing me in the right direction. The solution to my problem was proper component nesting.
The solution was to create 3 components with proper child-component inheritence. And declaring the child-components within the template of it's parent.
This way I end up only declaring "" and the magic happens :D.
So I have made 3 components:
- scrumboard > takes scrumboardColumn as component
- scrumboardColumn > takes ticket as component
- ticket
The root vue instance also loads the ticket component since the ticket component is also used on the backlog page.
I haven't completely finished the final product but I got the sortable working by calling it from within the ready function of the scrumboardColumn component like David suggested.
Hope this helps someone in the future!
I am using a powermail form inside of a two-column gridelement. While outside of the gridelement, the form works finde, but as I soon as I pack it into a column, it doesn't get rendered in the frontend.
Instead I just get a cache-reference (something like this: '< !--INT_SCRIPT.bac5b8b4bd3180848642d7849f -- >' ). So obviously the problem is somehow related to the content being cached.
So my question is: Where can I get started on fixing this?
How can I tell the gridelement to output rendered content instead of the cache-hash? Or would I need to get into the powermail code?
Here's my grid setup, in case that is any help:
plugin.tx_gridelements_pi1.setup.2col {
outerWrap = <div class="row"> | </div>
outerWrap.preCObject < lib.stdheader
columns.default {
outerWrap = <div class="col col-xs-12 col-sm-6"> | </div>
renderObj =< tt_content
}
}
Have you check in witch order you include the static templates? Gridelements should be the last entry.
And do you have an output when you deleting the grid setup..?