Requirements:

• git, nodejs, yarn or npm

• Runing postgresql server

Steps:

• Edit "auth.hjson" file entries to connect to your db

• Create necessary db structures and records

-- create table "categories" 
CREATE TABLE categories (
	id SERIAL PRIMARY KEY,
	name VARCHAR(64) NOT NULL
);

-- insert some categories, at least one is required
INSERT INTO categories (name) VALUES ('category example1'),('category example2');

-- create one-row table "active_category"
CREATE TABLE active_category (
    id BOOLEAN DEFAULT TRUE NOT NULL,
    cat_id INTEGER,
    CONSTRAINT id_uniq CHECK (id)
);

-- set default active category, it must be value of "id" column of "categories" table
INSERT INTO active_category (cat_id) VALUES (1); 

-- create table "sqls" where column "text" will contain saved sql queries
CREATE TABLE sqls (
    id SERIAL PRIMARY KEY,
    text TEXT,
    cat_id INTEGER
);

-- create one-row table "active" where "sql_id" column store id of lately added or changed row of "sqls" table 
CREATE TABLE active (
    id BOOLEAN DEFAULT TRUE NOT NULL,
    sqls_id INTEGER,
    CONSTRAINT id_uniq CHECK (id)
);

• Clone repository

/> git clone https://github.com/d-adamkiewicz/QEditorRViewer

• Install packages, when in app directory:

/> yarn install

• Run app

/> npm start

Presentation (on YouTube)

• Link

Example usage

• place each of following queries in textarea and then push "Run" button each time

-- create some table
CREATE TABLE my_table(id SERIAL PRIMARY KEY, name TEXT);

-- insert some rows into table
INSERT INTO my_table (name) VALUES ('Ala ma kota'), ('Ola ma psa'), ('Pies Ali wabi się As');

-- display "name" values 
SELECT name FROM my_table;

-- insert some long text
INSERT INTO my_table (name) VALUES ('Lorem ipsum dolor sit amet, consectetur adipiscing elit.');

-- 3 forms of displaying "name" column value
SELECT name AS name1_25, name AS name2_15, name AS name3_60 FROM my_table;

TODO:

• clean code, use "radium"

• implement "display more/less rows" button instead of "display me more rows when hover on last row"

• make "show left/right content of rows" buttons appear on the edges of the row clicked

• use config file entries to point to table names that the app would treat as "categories", "active_category", "active", "sqls"

• provide video presentation of how this work