i'm using Djangae to run my application on google appengine , i'm trying to store images to google CloudStorage ,
i followed the same exact proceedure mentioned here but nothing written on the CloudStorage , no errors no exceptions !
this is the model class that i have :
class Person(models.Model):
user = models.ForeignKey(User, default=1)
name = models.CharField(max_length=250,null=True)
last_name = models.CharField(max_length=500)
age= models.IntegerField(default=100)
martial_status = models.CharField(max_length=20, choices=STATUS_CHOICES, default=("Single"))
sex = models.CharField(max_length=20, choices=SEX_CHOICES, default=("Male"))
mobile=models.CharField(max_length=26,default=0011)
amount_paid=models.CharField(max_length=256,null=True)
amount_left = models.CharField(max_length=256, null=True,blank=True)
note=models.CharField(max_length=256,null=True,blank=True)
address=models.CharField(max_length=256,null=True,blank=True)
date = models.DateField(("Date"), default=date.today,blank=True)
chief_complain = models.CharField(max_length=256,null=True,blank=True)
treatment_plan=models.CharField(max_length=256,null=True,blank=True)
treatment_done=models.CharField(max_length=256,null=True,blank=True)
#picture = models.ImageField(blank=True)
picture = models.ImageField(upload_to='/image/', storage=public_storage,blank=True)
def __str__(self):
return self.name
the ModelForm :
class PersonForm(forms.ModelForm):
class Meta:
model = Person
fields = ['name', 'last_name', 'age', 'martial_status', 'mobile', 'sex',
'amount_paid','amount_left','note', 'address','date','picture','treatment_done','treatment_plan','chief_complain']
widgets = {
'name': forms.TextInput(attrs={'required': True, 'class': 'form-control',
'placeholder': 'name'}),
'last_name': forms.TextInput(attrs={'required': True, 'class': 'form-control',
'placeholder': 'lastname'}),
'age': forms.TextInput(attrs={'required': True, 'class': 'form-control',
'placeholder': 'age'}),
'amount_paid': forms.TextInput(attrs={'required': True, 'class': 'form-control',
'placeholder': 'amount paid'}),
'amount_left': forms.TextInput(attrs={'required': True, 'class': 'form-control',
'placeholder': 'amount left'}),
'note': forms.TextInput(attrs={'required': False, 'class': 'form-control',
'placeholder': 'Patient History'}),
'address': forms.TextInput(attrs={'required': False, 'class': 'form-control',
'placeholder': 'Current address'}),
'chief_complain': forms.TextInput(attrs={'required': False, 'class': 'form-control',
'placeholder': 'chief complain'}),
'treatment_plan': forms.Textarea(attrs={'required': False, 'class': 'form-control',
'placeholder': 'treatment plan','rows':'3'}),
'treatment_done': forms.Textarea(attrs={'required': False, 'class': 'form-control',
'placeholder': 'treatment done','rows':'3'}),
}
the template :
<h2>Add person</h2>
<form method="post">
{% csrf_token %}
<div class="row">
<div class="col-sm-4 form-group">
<label for="name" >{% trans "Name" %}</label>
{{ form.name|add_class:"form-control" }}
</div>
..<code snippet>..
<div class="row">
<div class="col-sm-4 form-group">
<label for="address">{% trans "Address" %}</label>
{{ form.address|add_class:"form-control" }}
</div>
<div class="col-sm-4 form-group">
<label for="pic">{% trans "Picture" %}</label>
{{form.picture}}
</div>
</div>
that's all what you have to do:
from djangae import fields, storage
public_storage = storage.CloudStorage(
bucket='my_project_id.appspot.com', google_acl='public-read')
class Picture(models.Model):
picture = models.FileField(upload_to='image', storage=public_storage, blank=True)
Related
With bootstrap-vue: 2.1 I implemented tables with big number of columns andwant to make scrolling of
columns, but failed with page like :
<template>
<b-card >
<b-card-body class="">
<b-card-title class="mb-2">
<h4>You can control users in system</h4>
</b-card-title>
<div>
<b-table
responsive="true"
stacked="false"
:items="users"
:fields="usersFields"
:per-page="0"
:current-page="current_page"
>
<template v-slot:cell(id)="data">
<div class="text-right">{{ data.value }}</div>
</template>
<template v-slot:cell(name)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(status)="data">
<div class="text-left admin_table_cell">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
</template>
<template v-slot:cell(permission_text)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(email)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(actions)="data">
<div class="text-center admin_table_cell">
<router-link :to="{name: 'adminUserEditor', params: {id: data.item.id}}" :class="'p-1 a_edit_item_'+data.item.id">
<i :class="'i_link '+getHeaderIcon('edit')" title="Edit user"></i>
</router-link>
<a v-on:click="removeUser(data.item.id, data.item.name, index)" :class="'p-1 a_delete_item_'+data.id">
<i :class="'fa fa-trash'"></i>
</a>
</div>
</template>
</b-table>
</div>
<b-pagination
v-model="current_page"
:total-rows="users_total_count"
:per-page="per_page"
aria-controls="my-table"
></b-pagination>
</b-card-body>
</b-card>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
import appMixin from '#/appMixin';
import {settingCredentialsConfig, settingsJsMomentDatetimeFormat, settingsUserStatusLabels} from '#/app.settings.js'
export default {
data() {
return {
users: [],
users_total_count: 0,
usersFields: [
'id',
{key: 'name', sortable: false},
{key: 'email', sortable: false},
{key: 'status', sortable: false},
{key: 'first_name', sortable: false},
{key: 'last_name', sortable: false},
{key: 'phone', sortable: false},
{key: 'website', sortable: false},
{key: 'permission_text', label: 'Permissions'},
'actions',
],
current_page: 1,
per_page: 2,
filter_name: '',
order_by: 'created_at',
order_direction: 'desc',
}
},
name: 'usersAdminListingPage',
mixins: [appMixin],
mounted() {
this.loadUsers()
}, // mounted() {
...
}
</script>
Setting property
responsive="true"
I expected hor scrolling automatically, but failed and I have all page design broken
and shifting at all left-right.
Which is valid way to make hor scrolling automatically ?
the props responsive and stacked are Boolean props (note they can also accept a string breakpoint names), and you are passing string "true" values to them (e.g. the string 'true').
So you should be doing:
<b-table :responsive="true" :stacked="false" ... >
<!-- ... --->
</b-table>
Or simply just the following:
<b-table responsive ... >
<!-- ... --->
</b-table>
Note stacked defaults to false if not specified.
I have a dynamically created data. Based on this I am creating a form. But problem is option is not added to to the select. What is wrong in this.
customerB :
{
rows:3,
columns: 2,
name: 'customerB',
fields:
[
{type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
],
}
HTML
<div class="rows" ng-repeat="field in customerB">
<div class="columns" ng-repeat="newvalue in field">
<div class="controls" ng-switch="newvalue.type">
<div class="form-group">
<label class="control-label">{{newvalue.label}}</label>
<select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check">
</select>
</div>
</div>
</div>
</div>
You got an object which got an array, inside the array you got another array which is not correctly manipulating.
Try understanding the following code snippet:
HTML:
<select name="repeatSelect" id="repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
JS
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
]
OR follow the link: https://docs.angularjs.org/api/ng/directive/select
This assumption might be wrong but I think in here ng-repeat="field in customerB" you are accessing object property directly without the scope variable. So you need to add whatever the scope variable name in front of the property name.
<div class="rows" ng-repeat="field in obj.customerB">
Other than that code you provided work perfectly.
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.obj = { customerB :
{
rows:3,
columns: 2,
name: 'customerB',
fields:
[
{type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
],
}}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="rows" ng-repeat="field in obj.customerB">
<div class="columns" ng-repeat="newvalue in field">
<div class="controls" ng-switch="newvalue.type">
<div class="form-group"> <label class="control-label">{{newvalue.label}}</label> <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check"></select> </div>
</div>
</div>
</div>
</div>
I am trying to generate a HTML form with angularjs ngRepeat. I load a JSON file that contains the fields of desired form and save this object in my $scope. I have a ngRepeat element that generates form inputs based on the JSON object.
The problem is when I print $scope.<myFormName> it just have one field name "{{header.name}}" as I expect some fields based on my JSON model.
Actually I see the form generated in HTML properly but the same thing does not happen in angular scope.
angular.module("myApp",[])
.controller("myCtrl",["$scope",function($scope){
// In this funtion I Set fields of form and make my model empty
$scope.getHeaders = function () {
console.info('getHeaders');
$scope.headersForCreation = [
{
name: 'givenName',
type: 'string',
caption: "nameAndFamily"
},
{
name: 'userName',
type: 'string',
caption: "userName"
},
{
name: 'password',
type: 'password',
caption: "password"
},
{
name: 'passwordConfirm',
type: 'password',
caption: "passwordConfirm"
},
{
name: 'mail',
type: 'string',
caption: "email"
},
{
name: 'mobile',
type: 'string',
caption: "mobile",
regex: '0[1-9][0-9]{9}'
}
];
$scope.userInputsInCreation = {};
angular.forEach($scope.headersForCreation, function (headerItem, key) {
$scope.userInputsInCreation[headerItem.name] = '';
});
}; // end of get header
$scope.getHeaders();
console.log($scope.createForm)
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" id="add-container-access" ng->
<form class="form-horizontal" name="createForm" init="getHeaders()">
<div class="form-group" ng-repeat="header in headersForCreation" >
<label for="id-{{header.name}}" class="col-sm-4 control-label">
{{header.caption}}: </label>
<div class="col-sm-8"
ng-class="{'has-error': createForm.{{header.name}}.$error.$invalid }">
<input type="header.type" class="form-control"
name="{{header.name}}" ng-required="{{header.notNull}}"
id="id-{{header.name}}"
ng-model="userInputsInCreation[header.name]" >
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button class="btn btn-default" >
ADD
<i class="glyphicon glyphicon-plus-sign"></i>
</button>
</div>
</div>
</form>
</div>
Because your controller initialized before AngularJS form directive.
angular.module("myApp",[])
.controller("myCtrl",["$scope","$timeout",function($scope, $timeout){
// In this funtion I Set fields of form and make my model empty
$scope.getHeaders = function () {
console.info('getHeaders');
$scope.headersForCreation = [
{
name: 'givenName',
type: 'string',
caption: "nameAndFamily"
},
{
name: 'userName',
type: 'string',
caption: "userName"
},
{
name: 'password',
type: 'password',
caption: "password"
},
{
name: 'passwordConfirm',
type: 'password',
caption: "passwordConfirm"
},
{
name: 'mail',
type: 'string',
caption: "email"
},
{
name: 'mobile',
type: 'string',
caption: "mobile",
regex: '0[1-9][0-9]{9}'
}
];
$scope.userInputsInCreation = {};
angular.forEach($scope.headersForCreation, function (headerItem, key) {
$scope.userInputsInCreation[headerItem.name] = '';
});
}; // end of get header
$scope.getHeaders();
$timeout(function(){ console.log($scope.createForm); });
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" id="add-container-access" ng->
<form class="form-horizontal" name="createForm" init="getHeaders()">
<div class="form-group" ng-repeat="header in headersForCreation" >
<label for="id-{{header.name}}" class="col-sm-4 control-label">
{{header.caption}}: </label>
<div class="col-sm-8"
ng-class="{'has-error': createForm.{{header.name}}.$error.$invalid }">
<input type="header.type" class="form-control"
name="{{header.name}}" ng-required="{{header.notNull}}"
id="id-{{header.name}}"
ng-model="userInputsInCreation[header.name]" >
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button class="btn btn-default" >
ADD
<i class="glyphicon glyphicon-plus-sign"></i>
</button>
</div>
</div>
</form>
</div>
I want to bind my ng-grid celltemplate to html textbox ( I am having ng-grid , which displays the data,below that I want to add a textbox, so that as I type something in textbox, the values should get update in cell Template of ng-grid).
Here is my html page:
<div ng-controller="bulkAssign" >
<form name="signup_form" method="POST">
<div style=" border: 1px solid rgb(212,212,212);
width: 1000px;
height: 200px;" ng-grid="gridUser">
</div>
<p><b>Editing grid</b></p>
<div class="gridStyle" ng-grid="gridOptions" data-ng-click="testSeletion()"></div>
<label>Edit grid from textbox</label>
<input type="number" name="assignTo" ng-model="assignTo" placeholder="Assign order to" class="form-control" >
</form>
</div>
Here is my controller:
$scope.gridOptions = {
data: 'names',
enableCellSelection: false,
enableRowSelection: true,
showSelectionCheckbox: true,
multiSelect: true ,
columnDefs: [
{
field: 'orderId',
displayName: 'OrderId',
enableCellEdit: false,
cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>'
},
{field: 'trackingId', displayName: 'trackingId', enableCellEdit: false, cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>' },
{field: 'orderTitle', displayName: 'OrderTitle', enableCellEdit: false},
{field:'customerName', displayName:'CustomerName', enableCellEdit: false},
{field:'customerContactno', displayName:'ContactNo', enableCellEdit: false},
{field:'assignTo', displayName:'assignTo', enableCellEdit:true,cellTemplate:'<input type="number">'}
],
selectedItems: $scope.mySelections,
filterOptions: $scope.filterOptions
};
My question is after entering value in textbox, when i click button, is it possible to update values in ng-grid celltemplate?
I have a data-ng-gridand I want to filter a specific column in using a <select> (dropdown list) but I cant seem to get it working. I am new to AngularJS so I may be doing this completely wrong but my code samples are below
HTML:
<div data-ng-controller="manualrecunreconciled as vm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="sourceNameSelected" ng-change="filterOptions.filterText = sourceNameSelected.type" class="form-control" style="width:100% !important">
<option>All</option>
</select>
</div>
<div class="col-sm-6 pull-right">
<div class="input-group">
<input class="form-control pull-right" type="text" name="SearchBox" data-ng-model="searchfilter" placeholder="Search for ..." />
<span class="input-group-addon">
<i class="fa fa-search" style="color: #555"></i>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="gridStyle" data-ng-grid="gridOptions" id="recoptions" style="height: 325px;"></div>
</div>
</div>
Controller:
$scope.manualrecfilter = [
'All',
'P - Property',
'I - Investment',
'B - Both'
];
$scope.sourceNameSelected = '';
$scope.filterOptions = {
filterText: "",
};
function updategridoptions() {
$scope.gridOptions = {
data: 'myData',
rowHeight: 40,
enableColumnResize: true,
selectedItems: $scope.mySelections,
plugins: [gridLayoutPlugin],
totalServerItems: 'totalServerItems',
columnDefs: [
{ field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
{ field: 'type', displayName: 'Type', width: 41 },
{ field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
{ field: 'reference', displayName: 'Reference', width: 162 },
{ field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
{ field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
],
filterOptions: {
filterOptions : $scope.filterOptions,
useExternalFilter: true
},
};
}
The filter should work when the option is selected (no clicking of any button), what am I doing wrong?
Found the answer a sort of answer that I could use but please note that it will filter all columns that have a match.
I updated my <select> in my HTML to:
<select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="filterOptions.filterText" class="form-control" style="width:100% !important">
and I also updated my controller to:
$scope.filterOptions = {
filterText: ''
};
$scope.manualrecfilter = [
'Prop',
'Inv',
'Both'
];
function updategridoptions() {
$scope.gridOptions = {
data: 'myData',
rowHeight: 40,
enableColumnResize: true,
filterOptions: $scope.filterOptions,
selectedItems: $scope.mySelections,
plugins: [gridLayoutPlugin],
totalServerItems: 'totalServerItems',
columnDefs: [
{ field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
{ field: 'type', displayName: 'Type', width: 41 },
{ field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
{ field: 'reference', displayName: 'Reference', width: 162 },
{ field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
{ field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
]
};
}