bezahlt von Shopware 6: Tipp aktueller Benutzer in der Administration
const { currentUser } = Shopware.State.get('session');
console.log(currentUser);
Und dann kann man ohne Probleme CustomFields des Users auslesen.
Blog: Blog-entries by search-pattern/Tags:const { currentUser } = Shopware.State.get('session');
console.log(currentUser);
Und dann kann man ohne Probleme CustomFields des Users auslesen.
Shopware 6: Ein CSV Download in der Administration
Hier ein kleines Beispiel eines CSV-Downloads der von einem API-Controller mit der Route "/api/example-module/download/csv/{id}" kommt. Man kann aber genau so gut alles per Criteria abfragen und das CSV in JavaScript bauen.
Die Methode für den Download sieht mit Controller-Lösung so aus:
downloadCsv(item) {
const httpClient = Shopware.Application.getContainer('init').httpClient;
httpClient.get('/example-module/download/csv/{' + item.id).then(result => {
const pom = document.createElement('a');
pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(result.data));
pom.setAttribute('download', 'csv_' + item.id + '.csv');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
}
else {
pom.click();
}
});
}
Das Prinzip ist an sich sehr einfach. Man baut sich ein a-Element mit gesetzten download-Attribute und simuliert einen Click darauf. Nur hinterlegt man hier die Daten als Data-URL und nicht die URL zum Controller direkt. Das würde nicht funktionieren als dann dort die Authorization-Infos im GET-Header fehlen würden.
Die Data-URL kann eben aus Daten von einem Controller gebaut werden oder direkt aus Daten, die JavaScript aggregiert wurden.
Sehr viel einfacher als die alten Lösungen mit FileSaver-Lib und viel hin und her wandeln von Blobs.
Shopware 6: Entity-Select ohne name-Field
https://component-library.shopware.com/components/sw-entity-single-select
Summernote: Image Resizing
Die Callback-Function:
let onImageUploadFunc = function (elementId) {
return function(image) {
resizeImage(image[0], elementId);
}
};
function resizeImage(file, elementId) {
let image = new Image();
let url = window.URL ? window.URL : window.webkitURL;
image.src = url.createObjectURL(file);
image.onload = function (e) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let width = 600;
let factor = image.width / width;
let height = image.height / factor;
if(image.height > image.width) {
height = 300;
factor = image.height / height;
width = image.width / factor;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
$(elementId).summernote('editor.insertImage', canvas.toDataURL('jpeg', 0.7));
};
}
Verwendung:
$('#editSolution').summernote(
{callbacks:{onImageUpload: onImageUploadFunc('#editSolution')}}
);
WSL und Vue Probleme
Momentan läuft es bei mir so am Besten:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get update && sudo apt-get install -y nodejs
Dann funktioniert auch die Vue-CLI Installation:
npm install -g @vue/cli
npm install -g @vue/cli-service-global
Unter Windows direkt... da war alles noch schlimmer.
CoreUI mit JSON-Schema
CoreUI und vue-form-generator arbeiten gut zusammen.
Man muss vue-form-generator nur per NPM installieren.
<template>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
JSON-Schema Form
</CCardHeader>
<CCardBody>
<vue-form-generator :schema="schema" :model="model" :options="formOptions">
</vue-form-generator>
</CCardBody>
<CCardFooter>
<CButton block color="primary">Submit</CButton>
</CCardFooter>
</CCard>
</CCol>
</CRow>
</template>
<script>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator);
export default {
name: 'Alerts2',
data () {
return {
model: {
id: 1,
name: 'John Doe',
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe@gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'ID (disabled text field)',
model: 'id',
readonly: true,
disabled: true
},
{
type: 'input',
inputType: 'text',
label: 'Name',
model: 'name',
placeholder: 'Your name',
featured: true,
required: true
},
{
type: 'input',
inputType: 'password',
label: 'Password',
model: 'password',
min: 6,
required: true,
hint: 'Minimum 6 characters',
validator: VueFormGenerator.validators.string
},
{
type: 'select',
label: 'Skills',
model: 'skills',
values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
},
{
type: 'input',
inputType: 'email',
label: 'E-mail',
model: 'email',
placeholder: 'User's e-mail address'
},
{
type: 'checkbox',
label: 'Status',
model: 'status',
default: true
}
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true,
validateAsync: true
}
}
}
}
</script>
Ja das ist einfach das Beispiel, das ich kopiert habe.... aber es funktioniert!
CoreUI: Ein Admin-Template für Vue
Die Installation über GitHub ist einfach und schnell.
Um ein eigens View anzulegen muss man an sich drei Dinge tun.
1. Die View anlegen:
2. In router/index.js die Component importieren und in die Router-Config einfügen:
3. In containers/_nav.js einen Link für die Sidebar einfügen:
4. Dann den Server starten:
npm run serve
Und unter http://localhost:8080 angucken.
Geht an sich alles ganz einfach.
Vue: Animations einbauen
<transition name="dialogbox">
<div class="overlay-content card" v-if="textDialog.show">
<h4 class="text-center card-header">{{ textDialog.title }}</h4>
<div class="text-field card-body">
{{ textDialog.content }}
</div>
<div class="text-center card-footer">
<button v-on:click="closeDialogs" class="btn btn-dark">close</button>
</div>
</div>
</transition>
Durch die Transition-Tag wird das Element eingeschlossen, dessen Änderung mit der Animation verknüpft werden soll. Der Name ist der der erste Teil des Animationsnamens.
.dialogbox-enter-active {
animation: open 0.8s;
}
.dialogbox-leave-active {
animation: open 0.4s reverse;
}
@keyframes open {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
die erste Klasse wird beim Anzeigen verwendet und die zweite, wenn das Element aus dem DOM entfernt wird.
Neben v.id geht auch v-show.
AngularJS + IE: OnChange mit Input und DataList
function onChangeIE(value){
var ua = window.navigator.userAgent;
if((ua.indexOf('Trident/') > 0 || ua.indexOf('MSIE ') > 0) && ua.indexOf('Edge/') <= 0) {
angular.element(document.getElementById('my-ng-controller-element')).scope().myInputModel = value;
angular.element(document.getElementById('my-ng-controller-element')).scope().myNgChangeFunction();
}
}
<input type="text" list="thelist" oninput="onChangeIE(this.value)" id="input_pattern" ng-model="myInputModel" ng-change="myNgChangeFunction()"/>
<datalist id="thelist"></datalist>
Die beste Lösung wäre solche alten Browser nicht mehr zu supporten und dann vielleicht auch auf Vue.js oder eine aktuelle Angular-Version zu wechseln.
Aber für schnelles Prototypen, wo man wenig Code schreiben will, ist AngularJS noch immer sehr gut. Teilweise ist man so schnell damit, dass man während einer Diskussion die Ideen direkt nebenbei umsetzen und ausprobieren kann. Wenn man erst einmal viele Components schreiben muss, geht es nicht so gut, wie mit den AngularJS Templates und Dingen wie ng-options. Mit Vue.js ist man mit etwas Übung aber auch ähnlich schnell.
JavaScript Values von Sub-Objects per Pfad-String
Wenn man einen Key hat und auf der ersten/obersten Ebene agiert wie bei item.id ist alles einfach. Bei item.sub.moreSub.verySub.id ist es schon schwieriger.. naja eigentlich nicht und jeder hat so etwas schon mal gebastelt. Hier meine Lösung die vielleicht jemanden 5 Minuten Arbeit ersparen kann :-)
function getObjectValue(obj, path){
let curObj = obj;
const parts = path.split(".");
for(let i = 0; i < parts.length; i++){
if(curOjb[parts] !== undefinded){
curObj = curObj[parts];
}
else {
return undefined;
}
}
return curObj;
}
getObjectValue({sub:{id: 23}}, "sub.id") == 23
Minimal Vue + Bootstrap Boilerplate
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Minimal Vue.js + Bootstrap 4 Boilerplate</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 class="text-center"></h1>
</div>
<script>
var app = new Vue({
el: '#app',
created: function () {
},
beforeDestroy: function () {
},
data: {
message: "Hello Web!"
},
methods: {
}
});
</script>
</body>
</html>
An sich für genau das wo für ich immer AngularJS verwendet habe. Werde ich hoffentlich demnächst für PWA erweitern.
Form Generatoren in den verschiedenen Frameworks
Vue:
FormSchema Native: lief erstmal ganz gut, aber wenn sich das Schema oder das Model im State geändert hat, würde die Form nicht neu gerendert. Wenn man eine Form-Component schreibt in die verschiedene Schemas rein gericht werden können zur Laufzeit ist das echt doof. Ansonsten machte es nämlich einen guten Eindruck.
React:
react-jsonschema-form: bis jetzt das Beste nur gibt es leichte Probleme wenn man $schema mit etwas anderen als dem default-Schema rein reicht. Aber ansonsten funktioniert bis jetzt am Besten. Auch mit 3 Forms auf der Seite.
AngularJS
Angular Schema Form: Wenn man nur eine Form auf der Seite braucht funktioniert es perfekt. Wenn ich aber zwei Forms mit zwei unterschiedlichen Schemas verwende, wollte die zweite Form nicht mehr rendern. Aber eine Form allein funktionierte echt super. Leider ist AngularJS aber ja nicht mehr wirklich supported und ich hätte lieber etwas für Vue gehabt, was genau so gut funktioniert.. eben dann auch mit 2-3 Form pro Seite. Edit: Problem hat sich in Luft aufgeloest...
Meine Suche geht weiter, weil ich Vue doch lieber mag als React. Oder am Ende doch selber schreiben oder ein andere auf JSON-Schema anpassen?
References vs Callback-Functions in Vue und React
Bei React müßte ich eine callback-funktion mit in die Unterkomponente reinreichen und bei der Änderung diese antriggern, damit die Oberkomponente die geänderten Daten in denen eigenen State wieder übernehmen kann. Also wird in dem Sinne jede Reference, wie sie in Vue.js existiert hätte, durch eine selbst zu implementierende callback-Funktion ersetzt?
Macht das Sinn? Erzeugt es nicht nur mehr Arbeit und Code? Wo genau ist da der Vorteil? Oder habe ich da was falsch verstanden bei React?
Irgendwie werde ich mit React nicht wirklich warm. Es sind so Kleinigkeiten, die mich da stören oder mir das Gefühl geben, einiges wäre unnötig kompliziert in React.
Vue.js: v-for mit Start-Index > 0
Blog-entries by search-pattern/Tags: