nzzdev / q-editor Goto Github PK

Remove cells containing only white-space characters around the data

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

Task

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"
  }
]

Introduction

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.

Implementation

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:

• #154
• nzzdev/Q-server#127

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

Description

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.

Description

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.

Where the meta-data will be stored

The meta-data will be stored in the data-property where as it would look like this

"data:": {
  "table": [...],
  "metaData": {...}
}

How the meta-data will be stored

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
      }
    }
  ]
}

What data will be stored

For now we implement the features highlight and annotations.
Both will be used in Q-table and Q-charts.

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.

Support placeholder in tool schema

All schema-editor input elements should support setting a placeholder attribute via tool schema

Description

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

Description

At the moment charts generated with vega are not being displayed in mobile width, instead there are wider and hence, have a scrollbar.

Steps to Reproduce

1. Go to q.st.nzz.ch/feed
2. Search for a line chart (rendered with vega)

Expected behavior: Display line chart also in mobile width without scrollbar

Actual behavior: Line charts are too wide.

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...

Description

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.

Task

The code structure of the livingdocs-component is very confusing. We should refactor it to make it more readable.

• Rethink code struture
• Replace promises with async await

• Add the notifications column in editor page
• Add default info boxes for input types
• Make possible that the text is configurable based on the options object in tool schema

• Implement the new preview section based on the new design

Introduction

Q-Editor knows the concept of checks to verify if some condition is true. Currently there are three different kinds of checks:

• AvailabilityChecks - checks if some option is available
• NotificationChecks - checks if a notification should be shown
• ToolEndpointChecks - executes a check in a specific tool (used by AvailabilityChecks, NotificationChecks and DynamicEnums)

Task

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:

AvailabilityChecks

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

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
  }
}

ToolEndpointChecks

Checks of type ToolEndpoint are executed inside the tool. An AvailabilityCheck or NotificationCheck can be of type ToolEndpoint.

Proposed Check configuration format

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
    }
  }
}

Problems

• Changing the configuration format is a breaking change. The editor could handle both formats till all tools are updated

Description

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.

show required state of inputs using the notification system.

We have a system to show notifications based on the data. We want to use the same system to show required state of inputs.

Description

• If the 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.
• Currently it correctly displays an error message if more than the maximum number of images are added
• But it somehow clears the already added images

Steps to Reproduce

1. Go to https://q.st-staging.nzz.ch/editor/imageslider/04a4b3a53e8303a04ba6ee984fba4e4c
2. Try to add more than one image to the image dropzone

Expected behavior:

• It is not possible to add more than one image per dropzone -> Error message
• The preview shows the added image

Actual behavior:

• Error message "Es können keine weiteren Dateien hochgeladen werden" shows
• The preview doesn't shows the added image

• Use custom elements slots feature to customize the header for each page (index/editor/detail-view)
• The custom elements slots feature is documented here: http://aurelia.io/docs/templating/content-projection#basic-content-projection
• Header should still be a single custom element, but it will now be part of each page and customized using slots

Description

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.

Steps to Reproduce

1. Go to q.st.nzz.ch
2. Search for starten
3. Quiz with id f30fc4d84b908bac1aab778e08e9e4f8 appears in the result list and widens the list because of the long title

Expected 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?]

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue.

• handsontable v2.0.0 is released
• Q editor schema-editor-table needs to use the new version 2.0.0 of handsontable

Create a PR against dev branch with the updated handsontable.

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.

Description

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.

Steps to Reproduce

1. Open a quiz directly from overview page
2. Go to the first question
3. Check in developer tools if click event on one of the answer buttons is registered twice (or check if rendering info endpoint is called twice)

Additional Information

Does not happen if you change to a different preview size or reload the page.

We have decided that we want to make the following improvements to the schema-editor-table component:

• Text in first row (header row) should be displayed bold
• Transpose Button should have text instead of icon as specified in the language ui document:
  • German text: "Zeilen und Spalten tauschen"
  • English text: "Switch rows and columns"
• Table should use all available width. This can be achieved by adding the "stretchH: all" property documented here
• Text inside cells should not be wrapped:
  • Currently if the text inside a cell is longer than the available width the text is wrapped on the next line
  • The text should not be wrapped same as Excel does. This can be achieved with the wordWrap property set to false.
  • Users can resize the column in order to see the full text
• Default amount of rows should be increased from 5 to 10 rows

Description

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.

Steps to Reproduce

1. Go to Q editor item preview page without valid auth
2. See that you are redirected to login page
3. See that you do not get to item preview page but to the index after successful login

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.

• Should this be different per target?
• Do we need a way to fix the height as well as some outputs may support a fixed height?
• Do we need to support more than 3 different widths in the preview?

schema-editor-code

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.

use a code editor for schema-editor-json

Currently schema-editor-json uses a simple textarea for data entry. It would be nice to use schema-editor-code for this.

• Implement new theme (new font, button style, spacing rules)

Description

We want the table editor in schema-editor-table to look more like Excel and thus more familiar with what users already know.

• Header should be shown with A, B, C in a gray background
• Column width should be adjustable by users
• All cells where a user can edit data should have a white background

schema-editor-table: hideTransposeButton option

The schema-editor-table should have an option to show/hide the transpose button defaulting to true for backwards compatibility.

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.

• The functionality to add a placeholder text to the schema is already implemented
• The placeholders need to be added to every tool (actual placeholder text and schema entry)

Introduction

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.

Implementation

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

Task

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"
  }
]

Q Editor doesn't show a reasonable error message if item cannot be saved because of conflict.

Steps to Reproduce

1. Open Item in editor
2. Open same item in editor in a different window
3. Change and save in one window
4. See that you cannot save in the other window because of conflict

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

Blueprinting of some items with arrays of objects fails (seen on Q-infographic)

When trying to blueprint an item with an array of objects it fails in some cases

Steps to Reproduce

1. Find Q-infographic item
2. Click "blueprint"
3. See that it fails with Bad Request when storing the new item because it doesn't validate against the schema as the objects in the array of images is null

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.

Description

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.

Introduction

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.

Migrating to webpack bundler?

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.

Other Aurelia vNext Features

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.

Admin page

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:

1. Task selection
2. Task input
3. Task output

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.

Description

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.

Motivation

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.

Task

Implement handling of sophieModules array. The sophie url must be constructed in the following way:
${SOPHIE_BUILD_SERVICE}sophie-q@1,[email protected]

especially for quiz we could need that latitude and longitude are set to required

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.

Feature description

Currently we always show the check all preview sizes notification, even though the user may have already check all of them.

Solution

We should track if the user has check all different sizes and then hide the notification

Description

required attribute is not properly set on input type number in schema-editor-number.

Steps to Reproduce

1. Open election_seats tool
2. See that Total verfügbarer Sitze input does not have required attribute set

Additional Information

This 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