nzzdev / q-editor Goto Github PK
View Code? Open in Web Editor NEWThis is the editor for the Q Toolbox.
License: MIT License
This is the editor for the Q Toolbox.
License: MIT License
In Issue #111 we figured the best way to implement this feature. It contains adding a new property to the schema where highlights, annotations or different data of each cell, column and row will be stored.
The meta-data will be stored in the data-property where as it would look like this
"data:": {
"table": [...],
"metaData": {...}
}
The data will be stored for cells, columns and rows.
"metaData": {
"cells": [
{
"rowIndex": 1,
"colIndex": 1,
"data": {
"highlight": true,
"annotation": "some string"
}
}
],
"columns": [
{
"colIndex": 1,
data: {
"highlight": true
}
}
],
"rows": [
{
"rowIndex": 2,
data: {
"highlight": true
}
}
]
}
For now we implement the features highlight and annotations.
Both will be used in Q-table and Q-charts.
At the moment charts generated with vega are not being displayed in mobile width, instead there are wider and hence, have a scrollbar.
Expected behavior: Display line chart also in mobile width without scrollbar
Actual behavior: Line charts are too wide.
AvailabilityChecks allow to specify whether the item should be sent as part of the request:
"availabilityChecks": [
{
"type": "ToolEndpoint",
"withData": true,
"endpoint": "option-availability/chartType"
}
]
It should be possible to define which part of the item should be sent like this:
"availabilityChecks": [
{
"type": "ToolEndpoint",
"data": ["data", "options.chartType", "options.hideAxisLabel"],
"endpoint": "option-availability/chartType"
}
]
Expected behavior: An error message should be shown that you cannot save because of conflict and that you should reload the editor or even allow to merge with the updated version from the database
Actual behavior: error is shown that it cannot be saved, but not why
For some form elements we may want to not indent objects or arrays within the form, e.g. in Q quiz images and article recommendation. Would be nice to have a special Q option or extend the already existing Q option compact
for that purpose.
We want the table editor in schema-editor-table to look more like Excel and thus more familiar with what users already know.
In account-dialog we have <option value="default"></option>
for the department select. We should have the same in meta-editor so graphics created by user without department are assigned the default
department.
Q editor should provide a way for tools to deliver translations for the name and property titles and maybe other strings.
this is not about entering data in multiple languages, just about having the static strings translatable.
Create a PR against dev branch with the updated handsontable.
The schema-editor-table should have an option to show/hide the transpose button defaulting to true for backwards compatibility.
We will implement a task system in Q server (nzzdev/Q-server#142). Some of these tasks should be available in an admin page in Q editor.
The page should be available at /admin
for users with the role admin
.
The page should be divided in three sections:
The task selection should be built from all tasks configured.
The task input is based on a JSON schema configured per task (using schema-editor).
The task output is some JSON returned from the task endpoint. We need to find a reasonable format for the structure of the return value.
If you are in a tool and try to change the language, the placeholders for "title" and "subtitle" won't translate.
Example in Q-Charts.
The preview widths are currently hardcoded to 290, 540 and 800 pixels with a default of 290.
We should allow these widths to be configured in Q server implementation.
Sometimes the list of q-items gets not filtered correctly and you see q-items of all tools and not only these tools which are already available in new Q. It often happens when I have to log in, but most probably it's not related to this. It's not really urgent, because at a certain point all tools will be migrated, but maybe figuring out the cause would be helpful nonetheless.
maxFiles
property is set in the schema like in the q-imageslider tool it should only be possible to add the maximum amount of images.Expected behavior:
Actual behavior:
There is a special Q:default
value called generateId
. If it is present, Q editor generates a unique id based on the item id and some random value.
In case an item gets blueprinted (cloned), it gets a new item id. every field that has Q:default
set to generateId
needs to be regenerated after that.
According to Christian, the "Briefing-Formular" was deleted and still referenced in the Q help page
Ich möchte eine Grafik aus Q auch im Print verwenden. Wie funktioniert das?
Bitte sag der Infografik Bescheid, welche Grafik du in welcher Grösse gerne hättest. Am besten verwendest du dafür das Briefing-Formular.
Therefore remove the link
If a q item has a long title it will widen the list too much, it should be shortened so that the list is does not get widened at all.
starten
f30fc4d84b908bac1aab778e08e9e4f8
appears in the result list and widens the list because of the long titleExpected behavior:
Result list should not get widened, title should be shortened at a smaller width
Actual behavior:
Result list gets widened
Reproduces how often: [What percentage of the time does it reproduce?]
Any additional information, configuration or data that might be necessary to reproduce the issue.
meta-editor has some hardcoded german strings, they should use the translation files. And Annotationen
should be named Notizen
.
And: Add an explanation at the top of meta-editor that these settings are used for filters and search only
We are introduction an new property sophieModules
to the renderingInfo object. It contains an array of sophie modules (sophie-q@1
). The editor preview and livingdocs preview should be able to construct a sophie build service url based on it.
Implement handling of sophieModules array. The sophie url must be constructed in the following way:
${SOPHIE_BUILD_SERVICE}sophie-q@1,[email protected]
Q-Editor uses JSPM to manage packages. It uses the approach described here to bundle the application using gulp tasks.
Currently gulp version 3.9.1
is used. In order to upgrade to the next LTS version of nodejs v10, we have to upgrade gulp to v4. A quick fix for this could be to upgrade the docker container to v10 and downgrade travis and nvm version to the last LTS version v8.
As part of Aurelia's vNext initiative Aurelia switched to webpack as default bundler (see blog post). We should evaluate what benefits we are getting from migrating to webpack and decide whether we want to migrate or not.
There are more improvements in Aurelia vNext which could be interesting for us like Aurelia Store for state management and Web Components export. Some of these features already reached v1 others are still in experimental state.
We should keep an eye on this developments and try to make use of them as soon as they are ready for production.
required
attribute is not properly set on input type number in schema-editor-number.
election_seats
toolTotal verfügbarer Sitze
input does not have required attribute setThis is probably because schema-editor-number does not have required
as bindable attribute defined here: https://github.com/nzzdev/Q-editor/blob/dev/client/src/elements/schema-editor/schema-editor-number.js#L8
For Q-custom-code we want to enter javascript code in the editor. We should implement a solution that has syntax highlighting and code formatting features as it makes changing the code much easier.
The same element should be usable to format JSON input nicely.
Q-Editor knows the concept of checks to verify if some condition is true. Currently there are three different kinds of checks:
The configuration used to execute a check should work the same across all the checks. This is mostly already the case now, but we want to change the configuration in order to be able add future things more easily.
Lets have a look at current config objects:
There are three types of AvailabilityCheck ItemHasId
, UserHasRole
, ToolEndpoint
:
{
"type": "UserHasRole",
"role": "expert-chart"
}
{
"type": "ItemHasId",
"unavailableMessage":
"Bitte speichere deinen Titel um fortzufahren."
}
{
"type": "ToolEndpoint",
"withData": true,
"endpoint": "option-availability/chartType"
}
NotificationChecks can be separated into two groups, ones which are executed inside the editor and ones which are executed in the tool. A notificationCheck always has a type
, data
and priority
property and optionally and options
property:
{
"type": "TooManyColumns",
"data": ["data"],
"priority": {
"type": "medium",
"value": 2
},
"options": {
"limit": 8
}
}
Checks of type ToolEndpoint
are executed inside the tool. An AvailabilityCheck or NotificationCheck can be of type ToolEndpoint
.
A check should have a type
and config
property. The type defines the kind of check and the config object stores all the properties that are needed for this kind of check.
{
"type": "UserHasRole",
"config": {
"role": "expert-chart"
}
}
{
"type": "ItemHasId",
"config": {
"unavailableMessage":
"Bitte speichere deinen Titel um fortzufahren."
}
}
{
"type": "ToolEndpoint",
"config": {
"endpoint": "option-availability/chartType",
"fields": ["vegaSpec"]
}
}
{
"type": "TooManyColumns",
"config": {
"fields": ["data"],
"priority": {
"type": "medium",
"value": 2
},
"options": {
"limit": 8
}
}
}
{
"type": "ToolEndpoint",
"config": {
"endpoint": "notification/shouldBeBarChart",
"fields": ["data", "options.chartType"],
"options": {
"limit": 2,
},
"priority": {
"type": "medium",
"value": 3
}
}
}
See: https://3.basecamp.com/3500782/buckets/1323890/todos/740520397#__recording_894772577
Seen in quiz tool, has the effect that event listeners on answer buttons are registered twice.
Does not happen if you change to a different preview size or reload the page.
When trying to blueprint an item with an array of objects it fails in some cases
null
When a user is redirected to the login page because of missing auth, she gets to index and not the page she initially requested before getting redirected to /login.
The code structure of the livingdocs-component is very confusing. We should refactor it to make it more readable.
For the custom-code tool we need the files component to be able to accept a zip file. The idea is that it is possible to upload a zip file contain all code/markup/style/images for the project.
At the moment the files component is only able to handle single file uploads. The schema has to look like this (example usage in q-quiz).
We want to be able to define the schema in the following way to upload a zip file:
{
"title": "Upload Zip file",
"type": "object",
"Q:type": "files",
"Q:options": {
"maxFiles": 1,
"acceptedFiles": "application/zip",
"fileProperties": {
"url": "url"
}
}
}
Link to code for schema-editor-files component: https://github.com/nzzdev/Q-editor/blob/dev/client/src/elements/schema-editor/schema-editor-files.js
Currently the message on top of preview-container is just Bad Request
. This is probably not understandable for users.
Expected behavior:
We should show a sentence explaining that the graphic cannot be displayed because the data is not valid.
especially for quiz we could need that latitude and longitude are set to required
Preview should always work no matter whether item is active or not (both for editor and ld component), at the moment item is not displayed and a 403 is sent as a response.
We already trim the null values and empty strings by setting empty cells to null
and them trimming all null
values around the matrix. We should transform all fields containing only white space characters to null
in emptyToNull
here: https://github.com/nzzdev/Q-editor/blob/dev/client/src/elements/schema-editor/schema-editor-table.js#L49
At some places we do replace(new RegExp("-", "g"), "_")
on the tool name.
This is because before we had tool names with dashes. That caused problems with the search.
They should all be migrated by now, so we could remove that code.
All schema-editor input elements should support setting a placeholder attribute via tool schema
Currently we always show the check all preview sizes notification, even though the user may have already check all of them.
We should track if the user has check all different sizes and then hide the notification
We have decided that we want to make the following improvements to the schema-editor-table component:
For the custom-code tool we want to be able to upload all project files (code/markup/stylesheets/images). At the moment the schema-editor-files component will upload files to the following destination /{year}/{month}/{day}/{uuid}.{fileextension}
, but we would like to store the project files in a different destination /custom_code/{uuid}/{subfolder}/{filename}.{fileextension}
. This has the advantage that all project files are in the same folder and all custom_code related files are separated from other uploaded content.
Q-Server already allows to prepend a prefix to the fileKey using the keyPrefix option. This option doesn't suit our needs because it is global (same for all q-tools). We would like to customize the keyPrefix
property specific to the custom-code tool.
We want to be able to define the schema in the following way to customize the keyPrefix:
{
"title": "Files",
"Q:type": "files",
"Q:options": {
"keyPrefix": "custom_code",
"acceptedFiles": "image/png,image/jpeg,application/javascript,application/json,text/css,image/svg+xml,image/gif,text/csv",
"fileProperties": {
"key": "key",
"url": "url"
}
}
}
In this example all files would be uploaded to the following destination -> custom_code/{uuid}/{filename}.{fileextension}
.
Dropzonejs supports directory uploads. It is possible to drop in a folder. Dropzonejs will upload all files contained in the folder. It is possible to retrieve the fullpath of each file and send it as part of the fileKey to the server side.
We were also thinking about using the qId instead of a UUID as identifier for a project in the filepath. But the qId can't be used because its not defined till the item is save for the first time. And uploads can already be made before the item is saved for the first time. Therefore we decided to use a UUID as identifier.
If the keyPrefix
property is defined the editor will pass an additional parameter fileKey
to the server side. The fileKey
property contains the full key (custom_code/{UUID}/{filename}.{fileextension}
) where the file should be saved at.
@benib would love to hear your feedback on this.
PR's with the changes are already open here:
Q server allows to implement another auth scheme than the cookie based one. Q editor needs to handle JWT and store these tokens in localStorage, renew them as they become old etc...
For some tools we need metaData for the data entered in the schema-editor-table. e.g. cell/row/column highlighting, annotations.
We want to explore how this should be done.
At the moment AvailabilityChecks allow to specify whether the item should be sent to the check endpoint:
"availabilityChecks": [
{
"type": "ToolEndpoint",
"withData": true,
"endpoint": "option-availability/chartType"
}
]
It should be possible to define which parts of the item that should be sent to the endpoint:
"availabilityChecks": [
{
"type": "ToolEndpoint",
"withData": ["data", "options.chartType", "options.hideAxisLabel"],
"endpoint": "option-availability/chartType"
}
]
Currently schema-editor-json
uses a simple textarea for data entry. It would be nice to use schema-editor-code for this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.