How to create alphabetic Sticky Header dynamically in flutter - header

I am very junior in Flutter. I have a Sqflite database that dynamically creates a list of Customer company names, using Cards and Listiles. I can get the database to list the customer names in alphabetic order, but I have been struggling for days to try and create Sticky Headers that sorts the customer names under alphabetic headings. I have imported the sticky header packages, but this sort by each and every entry of a customer name. It should instead, as example, group all the customer names starting with letter 'A' under sticky header 'A', then all customer starting with letter 'B' under sticky header 'B', so on and so forth. It will be really appreciated is someone can perhaps help me resolve this issue.
Here is the code:
Widget build(BuildContext context) {
return Expanded(
child: FutureBuilder(
future: db.getTodo(),
initialData: const [],
builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
var data = snapshot
.data; // this is the data we have to show. (list of todo)
var datalength = data!.length;
return datalength == 0
? const Center(
child: Text('no data found'),
)
: ListView.builder(
itemCount: datalength,
itemBuilder: (context, i) => StickyHeader(
header: Container(
width: double.infinity,
color: Colors.red,
padding: const EdgeInsets.all(16),
child: Text('Header $i'),
),
content: CustomerCard(
id: data[i].id,
title: data[i].title,
name: data[i].name,
phone: data[i].phone,
fax: data[i].fax,
email: data[i].email,
street: data[i].street,
city: data[i].city,
town: data[i].town,
code: data[i].code,
isExpanded: data[i].isExpanded,
insertFunction: insertFunction,
deleteFunction: deleteFunction,
),
),
);
}),
In the above picture, you can see the headings in red. These headings should be able to be a letter A or B or C, all the way down to Z all depending on the customer names. Secondly, the header should group all customer names starting with the same letter, hence, group all the A's together.
Remember my list/map is dynamic and part of a SQFlite database.
Thank you so much. I have read extensively and can't seem to find a solution.

Related

Get Empty Rows in TypeORM

I'm trying to write a typeORM query which includes multiple where clauses. I am able to achieve this via where option as follows:
const categories = [
{ name: 'master', categoryTypeId: 2, parentId: 1, locationId: null },
{ name: 'food', categoryTypeId: 3, parentId: null, locationId: null }];
const rows = await Repo.find({
where: categories.map((category) => ({
name: category.name,
categoryTypeId: category.categoryTypeId,
locationId: category.locationId
})),
});
I would want to maintain the mapping b/w the input array and the rows returned. For example, I know that the second category doesn't exist in the DB. I would want to have an empty object in the rows variable so that I know which categories didn't yield any result.
Upon research I have found that we can do something with SQL as mentioned here. But, I'm not sure how do I translate into typeORM if I can.

How to show icon next to value in cloumn in aurelia slickgrid/slickgrid?

I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.

How run a multiple predicate mapkeys filter in aerospike nodejs client?

In Aerospike, I need run a query based on mapkeys values, filtering by records having 2 values
My predicate for filter by one value looks like this, and it work
predexp.stringValue('t3'),
predexp.stringVar('item'),
predexp.stringEqual(),
predexp.mapBin('category'),
predexp.mapKeyIterateAnd('item')
I tried duplicating the code, using the "and()" method, etc but all tries return error code 4
some help, please?
I'm not entirely sure I understand your question. I think you want to find all records that have a map bin categories that has at least two keys t3 and some other specific value. Correct?
Here is how you would do that:
const as = require('aerospike')
as.connect().then(async client => {
await client.put(new as.Key('test', 'qq', 1), { categories: { red: 1, blue: 2, green: 3 } })
await client.put(new as.Key('test', 'qq', 2), { categories: { blue: 2, green: 3, yellow: 4 } })
const query = client.query('test', 'qq')
query.predexp = [
// Find any record that has a category blue.
as.predexp.stringValue('blue'),
as.predexp.stringVar('cat'),
as.predexp.stringEqual(),
as.predexp.mapBin('categories'),
as.predexp.mapKeyIterateOr('cat'),
// Find any record that has a category yellow.
as.predexp.stringValue('yellow'),
as.predexp.stringVar('cat'),
as.predexp.stringEqual(),
as.predexp.mapBin('categories'),
as.predexp.mapKeyIterateOr('cat'),
// Now combine the two expression using and() to find records with categories blue AND yellow.
// Use or(2) if you want to find records that have categories blue OR yellow.
as.predexp.and(2)
]
// prints [ { green: 3, yellow: 4, blue: 2 } ]
await query.results()
.then(records => records.map(r => r.bins.categories))
.then(console.log)
client.close()
})
Note that I'm using mapKeyIterateOr instead of mapKeyIterateAnd. That's because of each of the two subexpressions, I want any key of the categories map to be blue/yellow. If you use mapKeyIterateAnd that means you want every key of the map to meet your condition.

mapbox layer fill-color based on TEXT property

Is is possible to set the fill-color stops, based on a text property rather than a numeric value
e.g fill based on province name
My input dataset has a property/Column called PROV_ID and contains a 2 letter ID for each state/Province
So I am aiming toward something in the lines of: 'stops': [['GP', 'YELLOW']]
The code however does not render any fill-colors when when implemented as shown below, I have replaced my PROV_ID in the code below with the Primary key property [numeric] to test, and that works fine
I guess the question is really then if fill-color stops is limited to numeric properties only?
map.addLayer({
'id': 'countiesLayer',
'type': 'fill', /*define the type of layer fill, line, point, fill-extrusion, background, raster, circle*/
'source': 'mySrcName',
'source-layer': '3_Fields-83vr21',
'layout': {
'visibility': 'visible'
},
/*there are many options for styling - this is a simple style*/
'paint': {
'fill-color': {
'property': 'PROV_ID',
'stops': [['GP', 'YELLOW']]
},
'fill-outline-color': 'white'
}
});
I think you need an expression with the function match.
The code would be (not tested):
map.addLayer({
'id': 'countiesLayer',
'type': 'fill', /*define the type of layer fill, line, point, fill-extrusion, background, raster, circle*/
'source': 'mySrcName',
'source-layer': '3_Fields-83vr21',
'layout': {
'visibility': 'visible'
},
/*there are many options for styling - this is a simple style*/
'paint': {
'fill-color': ['match', ['get', 'PROV_ID'], // get the property
'GP', 'yellow', // if 'GP' then yellow
'XX', 'black', // if 'XX' then black
'white'] // white otherwise
},
'fill-outline-color': 'white'
}
});
From the docs:
match
Selects the output whose label value matches the input value, or
the fallback value if no match is found. The input can be any string
or number expression (e.g. ["get", "building_type"]). Each label can
either be a single literal value or an array of values.
["match",
input: InputType (number or string),
label_1: InputType | [InputType, InputType, ...], output_1: OutputType,
label_n: InputType | [InputType, InputType, ...], output_n: OutputType, ...,
default: OutputType ]: OutputType

Dojo DGrid RQL Search

I am working with a dgrid where I want to find a search term in my grid on two columns.
For instance, I want to see if the scientific name and commonName columns contain the string "Aca" (I want my search to be case insensitive)
My Grid definition:
var CustomGrid = declare([Grid, Pagination ]);
var gridStore = new Memory({ idProperty: 'tsn', data: null });
gridStore.queryEngine = rql.query;
grid = new CustomGrid({
store: gridStore,
columns:
[
{ field: "tsn", label: "TSN #"},
{ field: "scientificName", label: "Scientific Name"},
{ field: "commonName", label: "Common Name",},
],
autoHeight: 'true',
firstLastArrows: 'true',
pageSizeOptions: [50, 100],
}, id);
With the built in query language (I think simple query language), I was able to find the term in one column or the other, but I couldn't do a complex search that would return results for both columns.
grid.set("query", { scientificName : new RegExp(speciesKeyword, "i") });
grid.refresh()
I started reading and I think RQL can solve this problem, however, I am struggling with the syntax.
I have been looking at these pages:
http://rql-engine.eu01.aws.af.cm/
https://github.com/kriszyp/rql
And I am able to understand basic queries, however the "contains" syntax eludes me.
For instance if I had this simple data set and wanted to find the entries with scientific and common names that contain the string "Aca" I would think my contains query would look like this:
contains(scientificName,string:aca)
However, this results in no matches.
[
{
"tsn": 1,
"scientificName": "Acalypha ostryifolia",
"commonName": "Rough-pod Copperleaf",
},
{
"tsn": 2,
"scientificName": "Aegalius acadicus",
"commonName": "Northern Saw-whet Owl",
},
{
"tsn": 3,
"scientificName": "Portulaca pilosa",
"commonName": "2012-02-01",
},
{
"tsn": 4,
"scientificName": "Accipiter striatus",
"commonName": "Kiss-me-quick",
},
{
"tsn": 5,
"scientificName": "Acorus americanus",
"commonName": "American Sweetflag",
}
]
Can someone guide me in how to formulate the correct syntax? Thank you.
From what I'm briefly reading, it appears that:
contains was replaced by any and all
these are meant for array comparisons, not string comparisons
I'm not sure offhand whether RegExps can just be handed to other operations e.g. eq.
With dojo/store/Memory, you can also pass a query function which will allow you to do whatever you want, so if you wanted to compare for a match in one field or the other you could do something like this:
grid.set('query', function (item) {
var scientificRx = new RegExp(speciesKeyword, 'i');
var commonRx = new RegExp(...);
return scientificRx.test(item.scientificName) || commonRx.test(item.commonName);
});
Of course, if you want to filter only items that match both, you can do that with simple object syntax:
grid.set('query', {
scientificName: scientificRx,
commonName: commonRx
});