Is there a way to extend a mat-table that automatically includes the matSort directive (and other custom directives that interact with the columns, like filter) and still have the content inside hold the mat-sort-header directives?
<mat-table [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSort>
<ng-content></ng-content>
</mat-table>
Here is an example: https://stackblitz.com/edit/angular-bxsavu.
I've tried creating a component on its own that just puts <ng-content> inside the <table> element, but that creates the error:
DwfTableComponent.html:1 ERROR Error: Missing definitions for header,
footer, and row; cannot determine which columns should be rendered.
at getTableMissingRowDefsError (table-errors.ts:48)
I've tried adding nothing to the entire template and just using the original CDK_TABLE_TEMPLATE (seen in the stackblitz link above), and this creates the error:
ERROR TypeError: Cannot read property 'viewContainer' of undefined
at DwfMatTableExtendedComponent.CdkTable._forceRenderHeaderRows (table.ts:854)
So it seems like I can't really get any traction on making this work.
The context of this all is that our site has many tables that need to sort, but we need developers to be able to write in what columns are sortable when writing the markup. If I can get this to work for MatSort, I can then turn and apply this to my own server side filtering component that behaves very much like the MatSort feature (has a customFilter directive in the <table> element, and within the <th mat-header-cell *matHeaderCellDef> spot there is a custom-filter-header directive). And then the big piece of it will be another feature that lets the table change what cells display (links or text) when the table is "paused" -- another feature that is controlled by the wrapper but needing to affect the inside content.
There are many other features in our current "table-wrapper" (search windows, exports, paging), but this one part of it has been a constant source of confusion. There's something a little broken feeling when I can't make a component that is made of two well known components and still leaves the table structure flexible. I'm sure I'm missing some piece of it, but this would greatly reduce the repetition of code for each table we have to write.
I've managed to get a table up and running, by using the original CDK_TABLE_TEMPLATE and extending the CdkTable found in the source code. From there, I put the MatSort directive on my own component, and fill things out like normal.
There were several bumps along the way. For starters, you have to import the CdkTableModule in your module. Next, you have to implement OnInit and call super.ngOnInit() just to get it to render. Styling then requires using the source code's table.scss, and even then, you need to tweak things just to get it to look right.
At this point, it feels like I'm roaming into hack territory, but there is traction finally, and I think after I figure out why the default sorting doesn't happen (as well as glyphs not appearing), I'll be on my way to expanding this to what I need. It's by no means ready for production, but the development has led to a quick education on angular limitations and abilities.
If anyone is curious, the same link https://stackblitz.com/edit/angular-bxsavu provides where I'm at right now.
Related
I am trying to convert some inline polymer templates for grid columns, and the rendered value in the browser ends up as “NaN” for some reason.
So I simplified the template to reproduce the issue as the following:
grid.addColumn(LitRenderer.<SamplePerson>of("<span style='${item.stylename-0}'> test </span>")
.withProperty("stylename-0", dto -> "background-color: red"));
and the rendered value still says style="NaN". Is there something that I’m missing?
Steps to reproduce the issue:
Go to https://start.vaadin.com and add a Master-Detail view from the existing templates to the views.
Download the application and open it in your favorite editor.
in the com.example.application.views.masterdetail.MasterDetailView's constructor, add the column with a LitRenderer (you can copy the above snippet code as well).
Run the application, go to http://localhost:8080 and observe that the values for the manually added column hasn't been styled with a red background. Obviously, by inspecting the elements you could see the style="NaN" is rendered on the client.
Tested with V23.2.3 and V23.2.4 and the issue exists.
Nicely spotted by #leif-Åstrand, this was an issue regarding the -0 ending, which was being parsed as a mathematical subtraction in JS, and clearly resulting in "NaN".
The correct way of doing this kind of dynamic class or style values ("stylename-0", "stylename-1", ...) is to treat them as strings, so:
style='${item.stylename-0}'
should be written as
style='${item['stylename-0']}'
rails 3.2
I am new to slim, and I have to work with an application that's using it. Reading through some documentation, I see that using something like:
.class
which translates to:
<div class="class"></div>
In the code I inherited, in the .html.slim file, I have:
.form-section.customer_info
When I look through the stylesheets folder, I cannot find customer_info, but I can find form-section.
Shouldn't I be able to find customer_info in one of the stylesheets?
The answer is maybe you can find it in a stylesheet. But there are other cases, where you may not:
Sometimes a class is used as a target for a JavaScript snippet; if you find it mentioned in the javascript for the app, then you likely want to keep it because an interaction may depend on it (read the JS code to determine this).
Sometimes, the class has been removed from the stylesheet and not removed from the code; in this case you may remove it.
However, sometimes a class is added to mark the section of HTML as semantically significant so that styling can be applied to it at a future time; in that case, you may choose to keep it.
For instance, for better or ill, when I am writing code, I will name sections using classes, as .user-list or .part-table to indicate that, as the coder, I know the HTML code is going to contain users or parts. By doing this consistently I can mark out portions of the front end for later consistent styling by usage; that is, all the part tables can be styled the same way, all the user lists can be styled the same way, etc. Again, this is a convention I have seen used and that I practice. Nonetheless, these represent a few reasons why a class may be present in the HTML, but not referenced elsewhere.
Intro:
I'm trying out LESS in an asp.net mvc environment.
I use dotless for server side processing (and I wouldn't want to use client side processing especially afer publishing the complete project).
I have to apply a design where there are different color schemes depending on different things (e.g. time of the day).
Less felt very powerful in this case as designing a parameterized css and only changing like 10 variables at the beginning of the file for every theme was really uplifting.
Problem:
But I would need to somehow change the color themes from an outside parameter.
Ideas:
First I thought that an URL parameter like style.less?theme=fuschia would be good, but I found no way to parse something like this.
Then I thought that making a very short blue.less, green.less, orange.less consisting only declared color variables, and including the main.less in every one of them would be a solid solution.
I had no chance to try out the second solution, but I thought this would be a good time to ask for advice on the most robust way of doing this.
The problem again is: I want to control some things in my less file from the outside.
Yes you can (because I implemented that feature for exactly that reason).
Dotless supports parameters from the outside via the querystring parameter.
<link rel="stylesheet" href="style.less?foo=bar" />
Will let you use the following less:
#foo = bar;
The parameter injection code is very simple. it just prepends the variable declarations to your normal less file, so anything that comes as a querystring parameter will follow the above syntax.
The code in question is very simple: https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs
AFAIK, you cannot pass parameters for dotnetless to use to do the compile.
As a suggestion, why not just call different less files? This would be fairly easy to do by using a Viewbag property.
To make the different less ones, You first create a less file with each set of colors in them. Then you import your base css file. dotnetless will merge the color definations in the parent file with the usages in the base file. So you have something like -
#baseGray: #ddd;
#baseGrayDark: darken(#baseGray, 15%);
#baseGrayLight: lighten(#baseGray, 10%);
#import "baseCss.less";
I just tested this on and MVC3 project and it works.
Is there anyway to automatically find I18N violations in a Grails project? For example,
<td valign="top" class="name"><label for="enabled">Enabled:</label></td>
should be flagged because it's not using <g:message> to get the label value.
It would be nice if codenarc had a rule for this, but I don't think it does.
I have also looked for such a code quality test and have yet to find one.
Implementing this should be fairly trivial - if all text content in a GSP is required to be applied via tags, your GSP should consist entirely of element nodes and no text nodes.
This crux of the problem is predominantly an XML issue: how do you check a set of XML documents and flag those that contain text nodes?
Assuming you can import org.codehaus.groovy.grails.commons.GrailsResourceUtils in a codenarc rule you can use the VIEWS_DIR_PATH property to determine where all the GSP files live.
From there, the high level process you would need is:
Build a collection of all the GSP files in the application
For each file, load the content into an XML parser (Java has plenty) and check the node type for every node, flagging those files that contain text nodes
I appreciate that this is a very high level solution but conceptually it should work.
Recently I created a spike of a view engine, in which views are plain classes, and the content is created by using funny using-scope blocks.
The code together with a simple sample site is available at http://code.google.com/p/sharp-view-engine/
Here I'd like to hear your opinions regarding such an idea. Is it completely weird or maybe someone likes it?
I would actually not like that.
I can agree with DSLs (such as a Parser-Combinator or for generating XML Nodes in a data-context), but in this case I think that too much is being put in code that. And, in the end, this just complicates boundaries and leads to hard-to-maintain code. (You can already do the same, but with more verbosity just using the "standard" Web Controls. You can always use {subblock} in C# to limit a variables scope.)
The approach I prefer to use is templates with bindings (but no "code in templates"). That makes it easy for the "designer" (hopefully not me, or the next person to come along and) edit the layout of the view how they see fit. However, the core logic (the available controls and bindings) are kept in the code -- uncluttered. (Another advantage with the templates is that if they externally housed they do not require a recompile for every little change.)
Simplicity and maintainability are like ... zen.
This is an interesting idea taken to the extreme I'd say. At my shop we're using html conventions for pretty much everything except our layout. The only real html we have in the project is our Spark master page. For generating the content itself we use a convention engine that that spits out a semantic html model. (We're using the HtmlTags library from FubuMVC to build the semantic model.)
An example convention for rendering a multiline text box looks like:
public static HtmlTag Build(ElementRequest req)
{
return Tags.TextArea
.Rows(6)
.Id(req.ElementId)
.Attr("name", req.ElementId)
.Text(req.StringValue());
}
These conventions get triggered from reflecting on the view model (or we can manually call them from a helper method). The output is rendered (via ToString()) into the content section of our master page. We're joking that pretty soon we won't even need a view engine.
ps here's how we handle nesting. (Your using blocks look cluttered!)
return Tags.Div.Nest(
Tags.Button("save").AddClass("positive"),
Tags.Span.Text(" or "),
Tags.Anchor.Text("cancel").AddClass("negative")
);
Nest() is an extension method that simply takes a params array of HtmlTag and appends them to the parent's children collection.