How to filter nested list of list of objects with JSON field in django - django

I have a Model named Ad and it has a JSONfield named location_details.
while fetching the list of objects from Ad Model, I am applying filter for the location_details field
http://127.0.0.1:8000/ad-list/?limit=10&offset=0&ordering=-start_date&location_category=bus_station%2Chospital
While creating an ad, I compute the nearby places and store it as a JSON field as shown below
[ { name: "transit", label: "Transit", sub_categories: [ { name: "bus_station", label: "Bus Stop", values: [{name: 'A'}, {name: 'B'}], }, { name: "airport", label: "Airport", values: [], }, { name: "train_station", label: "Train Station", values: [], }, ], }, { name: "essentials", label: "Essentials", sub_categories: [ { name: "hospital", label: "Hospital", values: [{name: 'te'}], }, { name: "school", label: "Schools", values: [{name: 'B'}], }, { name: "atm", label: "ATMs", values: [], }, { name: "gas_station", label: "Gas Stations", values: [{name: 'C'}], }, { name: "university", label: "Universities", values: [], }, ], }, { name: "utility", label: "Utility", sub_categories: [ { name: "movie_theater", label: "Movie Theater", values: [], }, { name: "shopping_mall", label: "Shopping Mall", values: [], }, ], }, ];
I want to filter the ad list with multiple location_categories with the above JSON object, only if the location category has some data in it.
I don't know how to start with it, this is how my code looks like now
location_category = django_filters.CharFilter(method="filter_location_category")
def filter_location_category(self, queryset, name, value):
return queryset.filter(location_details__sub_categories__name__in=value.split(","))
For example, with the below request
http://127.0.0.1:8000/ad-list/?limit=10&offset=0&ordering=-start_date&location_category=bus_station%2Chospital
I want to get all the ads where bus_station and hospital have some data in it (inside the values key) and want to ignore it if the values list is empty in the JSON.
Any help would be highly appreciated. Thank you so much for your attention and participation.

Related

Chart Js Stacked Bar Chart with Multiple levels or categories

I am trying to create a chart in ng2-charts that will have multiple labels, so for example the x access would have categories of all the Months, above that it will be broken down into each week, and then the bar sections would be something like rainy days, dry days, and snowy days.
I have found their documentation here https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html and have their example working, but need to expand on that to add another level, is that possible?
The following is what I was able to get figured out. This code will allow create a chart with 3 categories on the x axis divided into 4 categories each. This isn't the full code set, but should hopefully give others an idea on how to proceed if they are stuck.
<canvas baseChart
*ngIf="!loading"
[datasets]="myChartData.chartData"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
The following is the code that is used to set the bar chart options from data being returned by the api
this.barChartOptions = {
responsive: true,
scales: {
xAxes: [
{
id: 'xAxis1',
type: 'category',
labels: this.myChartData.xAxis1Labels,
},
{
id: 'xAxis2',
type: 'category',
labels: this.myChartData.xAxis2Labels,
offset: true
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
callback: function(value: number) {if (value % 1 === 0) {return value;}}
}
}
]
},
title: {
display: true,
text: this.myChartData.title,
},
legend: {
labels: {
filter: function (item, chart) {
return item.text !== undefined && item.text !== null;
},
},
},
tooltips: { enabled: false },
hover: { mode: null },
};
This is the model that the api is returning:
import { ChartData } from "chart.js";
export class myChartData {
chartData: Array<ChartData>;
rankXAxisLabels: Array<string>;
namcXAxisLabels: Array<string>;
title: string;
}
Lastly, this is the format of the chartData Array that is being built by the api:
[
{
"data": [1,0,9,0,4,0,5,8,0,0,0,0],
"label": "firstPartOfBar",
"stack": "dataStack",
"backgroundColor": "red",
"hoverBackgroundColor": "red",
"xAxisID": "xAxis1"
},
{
"data": [1,0,8,0,5,0,0,0,0,0,6,7],
"label": "Second Part of Bar",
"stack": "dataStack",
"backgroundColor": "blue",
"hoverBackgroundColor": "blue",
"xAxisID": "xAxis1"
},
{
"data": [4,0,2,0,1,0,0,0,12,14,16,0],
"label": "Third Part of stack",
"stack": "dataStack",
"backgroundColor": "green",
"hoverBackgroundColor": "green",
"xAxisID": "xAxis1"
}
]

Infragistics delete row using string primaryKey

I have an Infragistics grid and am unable to delete a row when the primaryKey of the grid is of dataType string.
I can not set my primaryKey as dataType number because it is of this format: "KIT_001". Is there any clever way of using a delete button and being able to delete rows with this kind of data? Perhaps a way to set an incremented ID and use that for the delete button?
var dataSource = [
{"ProductID": "KIT_001", "Name": "Kit 1", "ProductNumber": "P4857"},
{"ProductID": "KIT_002", "Name": "Kit 2", "ProductNumber": "P4567"},
{"ProductID": "KIT_003", "Name": "Kit 3", "ProductNumber": "P4447"}
]
$(function () {
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "500px",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "string", width: "10%" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "30%" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
{ headerText: "", key: "Delete", dataType: "string", width: "10%", unbound: true,
template: "<input type='button' onclick='deleteRow(${ProductID})' value='Delete' class='delete-button'/>"},
],
primaryKey: "ProductID",
dataSource: dataSource,
features: [
{
name: "Updating",
enableAddRow: false,
editMode: "row",
enableDeleteRow: false,
}
]
});
});
function deleteRow(rowId) { console.log('rowId ',rowId)
var grid = $("#grid").data("igGrid");
grid.dataSource.deleteRow(rowId);
grid.commit();
}
Enclose the key parameter in quotes in your template:
template: "<input type='button' onclick='deleteRow(\"${ProductID}\")' value='Delete' class='delete-button'/>"

Sencha Touch: show in a store's list a field of another store

I'm working on a Sencha Touch App. This App have 3 lists: clients, tasks and asignations. Each one has its own model and store. The 3rd one, asignations lists, is an asignations of a task to a client, so that list must show which task and client are asignated.
Models
Ext.define('TasksApp.model.Asignation',{
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'asignID'},
{name: 'nombreasignacion', type: 'string'},
{name: 'clienteasignacion', type: 'string'},
{name: 'tareaasignacion', type: 'string'},
{name: 'finasignacion', type: 'date'},
{name: 'obsasignacion', type: 'string'},
{name: 'recordatorio', type: 'string'},
{name: 'estadoasignacion', type: 'string'}
],
}
});
Ext.define('TasksApp.model.Client',{
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'clientID'},
{name: 'nombrecliente', type: 'string'},
{name: 'obscliente', type: 'string'},
{name: 'tlfcliente', type: 'int'},
{name: 'emailcliente', type: 'string'},
{name: 'urlcliente', type: 'string'},
{name: 'asigncliente', type: 'int', defaultValue: 0}
],
}
});
Ext.define('TasksApp.model.Task',{
extend: 'Ext.data.Model',
config:
{
idProperty: 'id',
fields: [
{name: 'tareaID'},
{name: 'nombretarea', type: 'string'},
{name: 'descripciontarea', type: 'string'},
{name: 'tdesarrollotarea', type: 'int'},
{name: 'asigntarea', type: 'int', defaultValue: 0}
],
}
});
Asignations List View + Asignation Template
var plantillaAsignacion = new Ext.XTemplate(
'<tpl for=".">',
'<div class="tplAsignacion">',
'<div class="asignacionCabecera">',
'<DIV ALIGN=center><B><I>{nombreasignacion}</i></B></DIV>',
'</div>',
'<div class="clienteCuerpo">',
'<div class="asignacionImagen" style= "float: left;"><img src="resources/images/asign_icon.png"/></div>',
'<ol>',
'<li><pre> Cliente: {clienteasignacion}</a></pre></li>',
'<li><pre> Tarea: {tareaasignacion}</pre></li>',
'<li><pre> Finalización: {finasignacion:date("d/m/Y")}<div align="right">Estado: {estadoasignacion} <span class="status {estadoasignacion}"></span> </pre></li>', //("l, F d, Y")("d/m/Y")
'</ol>',
'</div>',
'</div>',
'</tpl>'
);
Ext.define('TasksApp.view.AsignationsList', {
extend: 'Ext.Container',
requires: [ 'Ext.TitleBar', 'Ext.dataview.List' ],
alias: 'widget.asignationslistview',
config: {
layout: {
type: 'fit',
},
items:
[
{
xtype: 'titlebar',
title: 'Lista de asignaciones',
docked: 'top',
items:
[
{
xtype: 'button',
iconCls: 'add',
ui: 'action',
itemId: 'newButton',
align: 'right'
},{
xtype: 'button',
text: 'Clientes',
ui: 'action',
itemId: 'goToClients', iconCls: 'team',
align: 'left'
},
{
xtype: 'button',
text: 'Tareas',
ui: 'action',
itemId: 'goToTasks', iconCls: 'bookmarks',
align: 'left'
},
]
},
{
xtype: 'list',
store: 'Asignations',
itemId: 'asignationsList',
cls: 'estado-asignacion',
loadingText: 'Cargando Asignaciones...',
emptyText: 'No hay asignaciones actualmente',
onItemDisclosure: true,
//grouped: true,
itemTpl: plantillaAsignacion,
}
],
listeners:
[
{
delegate: '#newButton',
event: 'tap',
fn: 'onNewButtonTap'
},
{
delegate: '#asignationsList',
event: 'disclose',
fn: 'onAsignationsListDisclose'
},
{
delegate: '#goToClients',
event: 'tap',
fn: 'onGoToClients'
},
{
delegate: '#goToTasks',
event: 'tap',
fn: 'onGoToTasks'
}
]
},
onNewButtonTap: function () {
console.log('newAsignationCommand');
this.fireEvent('newAsignationCommand', this);
},
onAsignationsListDisclose: function (list, record, target, index, evt, options) {
console.log('editAsignationCommand');
this.fireEvent('editAsignationCommand', this, record);
},
onGoToClients: function () {
console.log ('goToClientsCommand');
this.fireEvent('goToClientsCommand', this);
},
onGoToTasks: function () {
console.log ('goToTasksCommand');
this.fireEvent('goToTasksCommand', this);
}
});
Asignation Editor View ( form of the asignation )
Ext.define('TasksApp.view.AsignationEditor', {
extend: 'Ext.form.Panel',
requires: [
'Ext.TitleBar', 'Ext.form.FieldSet', 'Ext.field.Text','Ext.field.Select', 'Ext.field.DatePicker', 'Ext.field.TextArea','Ext.form.Panel'
],
alias: 'widget.asignationeditorview',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Editar Asignación',
items:
[
{
xtype: 'button',
ui: 'back',
text: 'Volver',
itemId: 'backButton',
align: 'left'
},
{
xtype: 'button',
ui: 'action',
text: 'Guardar',
itemId: 'saveButton',
align: 'right'
}
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
iconCls: 'trash',
iconMask: true,
itemId: 'deleteButton'
}
]
},
{
xtype: 'fieldset',
items:
[
{
xtype: 'textfield',
name: 'nombreasignacion',
label: 'Nombre',
required: true,
autoCapitalize: true,
placeHolder: 'Nombre de la asignación...'
},
{
xtype: 'selectfield',
name: 'clienteasignacion',
label: 'Cliente',
valueField: 'clientID',
displayField: 'nombrecliente',
store: 'Clients',
autoSelect: false,
placeHolder: 'Seleccione un cliente...',
required: true,
},
{
xtype: 'selectfield',
name: 'tareaasignacion',
label: 'Tarea',
valueField: 'tareaID',
displayField: 'nombretarea',
store: 'Tasks',
autoSelect: false,
placeHolder: 'Seleccione una tarea...',
required: true,
},
{
xtype: 'datepickerfield',
name: 'finasignacion',
label: 'Vencimiento',
dateFormat: 'd/m/Y',
value: (new Date()),
picker:
{
yearFrom: new Date().getFullYear(),
yearTo: 2040,
slotOrder: [ 'day', 'month', 'year' ]
}
},
{
xtype: 'textareafield',
name: 'obsasignacion',
label: 'Observaciones',
autoCapitalize: true,
autoCorrect: true,
placeHolder: 'Observaciones de la asignación...',
maxRows: 5
},
{
xtype: 'selectfield',
name: 'recordatorio',
label: 'Recordatorio',
autoSelect: true,
placeHolder: 'Seleccione el método recordatorio...',
required: true,
options:
[
{
text: 'Ninguno',
value: 0
},
{
text: 'eMail',
value: 2
},
{
text: 'SMS',
value: 1
},
{
text: 'Notificación',
value: 3
}
]
},
{
xtype: 'selectfield',
name: 'estadoasignacion',
label: 'Estado',
autoSelect: true,
placeHolder: 'Seleccione el estado...',
required: true,
options:
[
{
text: 'Activa',
value: 'Activa'
},
{
text: 'Caducada',
value: 'Caducada'
},
{
text: 'Cancelada',
value: 'Cancelada'
},
{
text: 'Realizada',
value: 'Realizada'
}
]
},
]
}
],
listeners: [
{
delegate: '#saveButton',
event: 'tap',
fn: 'onSaveButtonTap'
},
{
delegate: '#deleteButton',
event: 'tap',
fn: 'onDeleteButtonTap'
},
{
delegate: '#backButton',
event: 'tap',
fn: 'onBackButtonTap'
}
]
},
onSaveButtonTap: function () {
console.log('saveAsignationCommand');
this.fireEvent('saveAsignationCommand', this);
},
onDeleteButtonTap: function () {
console.log('deleteAsignationCommand');
this.fireEvent('deleteAsignationCommand', this);
},
onBackButtonTap: function () {
console.log('backToHomeCommand');
this.fireEvent('backToHomeCommand', this);
}
});
Asignation Controller
Ext.define('TasksApp.controller.Asignations', {
extend: 'Ext.app.Controller',
config: {
refs: {
asignationsListView: 'asignationslistview',
asignationEditorView: 'asignationeditorview'
},
control: {
asignationsListView: {
newAsignationCommand: 'onNewAsignationCommand',
editAsignationCommand: 'onEditAsignationCommand'
},
asignationEditorView: {
saveAsignationCommand: 'onSaveAsignationCommand',
deleteAsignationCommand: 'onDeleteAsignationCommand',
backToHomeCommand: 'onBackToHomeCommand'
}
}
},
getSlideLeftTransition: function () {
return { type: 'slide', direction: 'left' };
},
getSlideRightTransition: function () {
return { type: 'slide', direction: 'right' };
},
getRandomInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
activateAsignationEditor: function (record) {
var asignationEditorView = this.getAsignationEditorView();
asignationEditorView.setRecord(record); // load() is deprecated.
Ext.Viewport.animateActiveItem(asignationEditorView, this.getSlideLeftTransition());
},
activateAsignationsList: function () {
Ext.Viewport.animateActiveItem(this.getAsignationsListView(), this.getSlideRightTransition());
},
onNewAsignationCommand: function () {
console.log('onNewAsignationCommand');
var now = new Date();
var asignationId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newAsignation = Ext.create('TasksApp.model.Asignation', {
id: asignationId,
nombreasignacion: '',
clienteasignacion: '',
tareaasignacion: '',
finasignacion: '',
obsasignacion: '',
recordatorio: '',
estadoasignacion: ''
});
this.activateAsignationEditor(newAsignation);
},
onEditAsignationCommand: function (list, record) {
console.log('onEditAsignationCommand');
this.activateAsignationEditor(record);
},
onSaveAsignationCommand: function () {
console.log('onSaveAsignationCommand');
var asignationEditorView = this.getAsignationEditorView();
var currentAsignation = asignationEditorView.getRecord();
var newValues = asignationEditorView.getValues();
currentAsignation.set('nombreasignacion', newValues.nombreasignacion);
currentAsignation.set('clienteasignacion.nombrecliente', newValues.clienteasignacion);
currentAsignation.set('tareaasignacion.nombretarea', newValues.tareaasignacion);
currentAsignation.set('finasignacion', newValues.finasignacion);
currentAsignation.set('obsasignacion', newValues.obsasignacion);
currentAsignation.set('recordatorio', newValues.recordatorio);
currentAsignation.set('estadoasignacion', newValues.estadoasignacion);
var asignationsStore = Ext.getStore('Asignations');
if (null == asignationsStore.findRecord('id', currentAsignation.data.id)) {
asignationsStore.add(currentAsignation);
}
asignationsStore.sync();
asignationsStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);
this.activateAsignationsList();
},
onDeleteAsignationCommand: function () {
console.log('onDeleteAsignationCommand');
var asignationEditorView = this.getAsignationEditorView();
var currentAsignation = asignationEditorView.getRecord();
var asignationsStore = Ext.getStore('Asignations');
asignationsStore.remove(currentAsignation);
asignationsStore.sync();
this.activateAsignationsList();
},
onBackToHomeCommand: function () {
console.log('onBackToHomeCommand');
this.activateAsignationsList();
},
launch: function () {
this.callParent(arguments);
var asignationsStore = Ext.getStore('Asignations');
asignationsStore.load();
console.log('launch');
},
init: function () {
this.callParent(arguments);
console.log('init');
}
});
I want the asignations list to show the client name ( nombrecliente ) and the task name ( nombretarea ), but it shows nothing at all. I don't know how to refer to this values so the list shows them. I tried to modify the asignations controller, the selectfield int the asignation editor ( form ) and the asignations template, but I simply don't know how this works and what I have to do to show that values ( if they are saved in the asignations store at this moment via selectfield, or am I doing anything wrong? )
I would appreciate any help. Thank you in advance.
PS: sorry for my English, it's not my native language :)
Please create array in the key value pair with the key name as your model field and then set that data into your asign Asignations store like:
Asignations.setdata({fieldName:"value"});

Sideload a lists "belongsTo" objects with EmberData

I have 3 emberData models:
App.Product = DS.Model.extend({
page_title: DS.attr('string'),
shop: DS.belongsTo('App.Shop'),
user: DS.belongsTo('App.User')
});
App.Shop = DS.Model.extend({
name: DS.attr('string'),
});
App.User = DS.Model.extend({
name: DS.attr('string')
});
and the JSON data looks like this:
{
products: [
{
id: "1",
page_title: "Product 1",
user_id: "1",
shop_id: "1",
},
{
id: "2",
page_title: "Product 2",
user_id: "2",
shop_id: "1",
}
],
users: [
{
id: "1",
name: "User 1"
},
{
id: "2",
name: "User 2"
}
],
shops: [
{
id: "1",
name: "Shop 1"
}
]
}
But when I load the data I got the following error:
Assertion failed: Your server returned a hash with the key shops but you have no mapping for it
Ok, the documentaion is very unclear about the fact that when you have a belongsTo relationship the key for the sideload must be singular not plural even if its a list. So the JSON has to look like this:
{
products: [
{
id: "1",
page_title: "Product 1",
user_id: "1",
shop_id: "1",
},
{
id: "2",
page_title: "Product 2",
user_id: "2",
shop_id: "1",
}
],
user: [
{
id: "1",
name: "User 1"
},
{
id: "2",
name: "User 2"
}
],
shop: [
{
id: "1",
name: "Shop 1"
}
]
}

List paging from json

I am finaly able to retrieve my datas from the json file BUT the paging system still sucks. The pageSize property seems not to respond therefore when i press on the load more plugin text that appears at the bottom of my list, it appends all my json elements to my list everytime. I am confident about the fact that i am almost there but i can't see how to make it happen.
Here is the code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
var dataLink;
if (Ext.is.Desktop) {
dataLink = "http://127.0.0.1/Appsfan-v2";
} else {
dataLink = "http://appsfan.kreactive.eu";
}
Ext.regModel('Profile', {
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'age', type: 'number'}
]
});
var store = new Ext.data.JsonStore({
model: 'Profile',
autoLoad: false,
remoteFilter: true,
sortOnFilter: true,
//sorters: [{property : 'lastname', direction: 'ASC'}],
pageSize: 1,
clearOnPageLoad: false,
proxy: {
type: 'ajax',
url: dataLink+'/data.json',
reader: {
root: 'profile',
type: 'tree'
}
}
});
console.log(store)
//console.log(store.loadPage(0))
var groupingBase = new Ext.List({
fullscreen: true,
itemTpl: '<div class="contact2"><strong>{firstname}</strong> {lastname} -> {age}</div>',
indexBar: false,
store: store,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}]
});
var panel = new Ext.Panel({
layout: 'card',
fullscreen: true,
items: [groupingBase],
dockedItems: [{
xtype: 'toolbar',
title: 'paging example',
}]
})
//console.log(datas)
}
});
The json
{
"profile": [{
"firstname": "firstname1",
"lastname": "lastname1",
"age": "1"
},{
"firstname": "firstname2",
"lastname": "lastname2",
"age": "2"
},{
"firstname": "firstname3",
"lastname": "lastname3",
"age": "3"
}]
}
Thank you
You can set the clearOnPageLoad config option in your store. This will remove previous records when the next page of the paginated data is loaded.
Here is an example:
Ext.regStore('BarginsStore', {
model: 'BarginModel',
autoLoad: false,
pageSize: 6,
clearOnPageLoad: false,
});