Vir 1644 update formulaic ember js

Dockerfile

@@ -8,4 +8,4 @@ WORKDIR /app
 RUN pip install -r requirements.txt
 
 # Make port 8000 available to the world outside this container
-EXPOSE 8000
+EXPOSE 8000

docker-compose.yml

@@ -6,7 +6,7 @@ services:
         volumes:
             - ./../postgres-data:/var/lib/postgresql/data
         ports:
-            - "5432:5432"
+            - "5435:5432"
         environment:
             - POSTGRES_DB=postgres
             - POSTGRES_USER=postgres

formulaic/static/admin/formulaic/ember-formulaic/README.md

@@ -7,51 +7,43 @@ A short introduction of this app could easily go here.
 
 You will need the following things properly installed on your computer.
 
-* [Git](https://git-scm.com/)
-* [nvm](https://github.com/creationix/nvm)
-* [Node.js](https://nodejs.org/) (with NPM)
-* [Bower](https://bower.io/)
-* [Ember CLI](https://ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/) - TK: for testing
+- [Git](https://git-scm.com/)
+- [Node.js](https://nodejs.org/) (with nvm)
+- [Ember CLI](https://cli.emberjs.com/release/)
+- [Google Chrome](https://google.com/chrome/)
 
 ## Installation
+Install nvm
+- `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash`
 
-* `nvm use`
-* `npm install`
-* `bower install`
+(Install node v20 using nvm)
+- `nvm install 20`
+- `git clone <repository-url>` this repository
+- `cd django-formulaic/formulaic/static/admin/formulaic/ember-formulaic`
+- `npm install`
+- `ember g ember-cli-sass`
 
 ## Running / Development
 
-* `nvm use`
-* `ember serve`
+- `npm run start`
+- Visit your app at [http://localhost:4200](http://localhost:4200).
+- Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
 ### Code Generators
 
 Make use of the many generators for code, try `ember help generate` for more details
 
-### Running Tests - TK
+### Running Tests
 
-* `ember test`
-* `ember test --server`
+- `npm run test`
+- `npm run test:ember -- --server`
 
-### Building - TK: I generally don't differentiate the build created by `ember serve` from `ember build`
+### Linting
 
-* `ember build` (development)
-* `ember build --environment production` (production)
+- `npm run lint`
+- `npm run lint:fix`
 
-### Deploying
+### Building
+- `npm run build` (production)
 
-Most JavaScript changes can be deployed without any special effort.  The templates point
-to `/dist/` already.  However, if you make a configuration change
-(e.g. `config/environment.js`) or anything else that requires a new commit of
-`app/index.html`, you may need to update the Django template
-(`<formulaic-dir>/templates/admin/formulaic/form/index.html`) with the change.
 
-## Further Reading / Useful Links
-
-* [GEMG Wiki Entry on Dep Management](https://github.com/Govexec/ge-govexec/wiki/JavaScript-Dependency-Management)
-* [ember.js](http://emberjs.com/)
-* [ember-cli](https://ember-cli.com/)
-* Development Browser Extensions
-  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
-  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

formulaic/static/admin/formulaic/ember-formulaic/app/adapters/application.js

@@ -1,30 +1,49 @@
-import Ember from 'ember';
-import DRFAdapter from './drf';
-
-export default DRFAdapter.extend({
-    buildURL: function(type, id, snapshot, requestType) {
-        /**
-         * Overriding `buildURL` to keep data fresh.  Without this,
-         * I was getting old data on refresh.
-         */
-
-        var url = this._super(type, id, snapshot, requestType);
-
-        // TODO: replace this with a global constant that gets changed every time cache should be invalidated?
-        var cacheBreaker = 'cacheBreaker=' + Math.round(new Date().getTime() / 1000);
-        cacheBreaker = ((url.indexOf('?') > -1) ? '&' : '?') + cacheBreaker;
-
-        return url + cacheBreaker;
-    },
-
-    headers: Ember.computed(function() {
-        /**
-         * Adding CSRF header to protect against cross-domain
-         * forgery attacks.
-         */
-
-        return {
-            "X-CSRFToken": this.cookie.getCookie('csrftoken')
-        };
-    }).volatile()
-});
+import RESTAdapter from '@ember-data/adapter/rest';
+
+
+export default class ApplicationAdapter extends RESTAdapter {
+
+  get host() {
+
+    return "";
+  }
+
+  get namespace() {
+    return "formulaic/api";
+  }
+
+  buildURL(modelName, id, snapshot, requestType, query) {
+    let url = super.buildURL(...arguments);
+
+    // Add cache breaker (if needed)
+    let cacheBreaker = 'cacheBreaker=' + Math.round(new Date().getTime() / 1000);
+    cacheBreaker = ((url.indexOf('?') > -1) ? '&' : '?') + cacheBreaker;
+
+    return url + "/" + cacheBreaker;
+  }
+
+  get headers() {
+    let csrfToken = this.getCsrfTokenFromCookies();
+    return {
+      'X-CSRFToken': csrfToken,
+      'Accept': 'application/json, text/javascript, */*; q=0.01',
+    };
+  }
+
+  getCsrfTokenFromCookies() {
+    let csrfToken = null;
+    const cookies = document.cookie.split(';');
+    for (let cookie of cookies) {
+      const [name, value] = cookie.trim().split('=');
+      if (name === 'csrftoken') {
+        csrfToken = value;
+        break;
+      }
+    }
+    return csrfToken;
+  }
+
+  handleResponse(status, headers, payload, requestData) {
+    return super.handleResponse(status, headers, payload, requestData);
+  }
+}

formulaic/static/admin/formulaic/ember-formulaic/app/app.js

@@ -1,19 +1,13 @@
-import Ember from 'ember';
+import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'ember-formulaic/config/environment';
 
-let App;
-
-Ember.MODEL_FACTORY_INJECTIONS = true;
-
-App = Ember.Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  rootElement: "#formulaic-container",
-  Resolver
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  rootElement= "#formulaic-container";
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

formulaic/static/admin/formulaic/ember-formulaic/app/components/base-sortable.js

@@ -1,43 +1,80 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    templateName: 'sortable',
-    sortableSelector: '.sortable',
-
-    didInsertElement: function() {
-        let thisView = this;
-
-        this.sortable = this.$(this.sortableSelector).sortable({
-            update: function() {
-                thisView.updateSortable(this);
-            },
-            containment: 'parent',
-            tolerance: 'pointer',
-            cursor: 'move'
-        });
-
-        // Listen to controller
-        // this.get('controller').on('orderInvalidated', this, this.updateSortable);
-    },
-    updateSortable: function() {
-        let $ = Ember.$;
-
-        this.sortable.find('.item').each(function(index) {
-            let positionElement = $(this).find('.position');
-            positionElement.val(index);
-            positionElement.trigger('change');
-        });
-
-        this.sortable.sortable("refresh");
-    },
-    willDestroy: function() {
-        // Un-register listener
-        // this.get('controller').off('orderInvalidated', this, this.updateSortable);
-    },
-    actions: {
-        triggerUpdateSortable: function() {
-            this.updateSortable();
-        }
-    }
-});
+// components/base-sortable.js
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+import {action} from "@ember/object";
 
+export default class BaseSortableComponent extends Component {
+
+  @service store;
+  @service('field-service') fieldService;
+
+  @tracked items = this.fieldService.currentFormRules;
+  @tracked formFields = this.fieldService.currentFormFields;
+
+  @tracked draggedItem = null;
+  @tracked draggedIndex = null;
+  @tracked placeholderIndex = null;
+
+  @action
+  dragStart(index, event) {
+    this.draggedItem = this.items[index];
+    this.draggedIndex = index;
+    this.placeholderIndex = index;
+  }
+
+
+  @action
+  dragOver(event) {
+    event.preventDefault();
+  }
+
+
+  @action
+  dragDrop(index) {
+    const items = [...this.items];
+    const draggedItem = this.draggedItem;
+
+    items.splice(this.draggedIndex, 1);
+    items.splice(index, 0, draggedItem);
+
+    this.fieldService.currentFormRules = items;
+    this.items = items;
+
+    this.draggedItem = null;
+    this.draggedIndex = null;
+    this.placeholderIndex = null;
+  }
+
+
+  @action
+  dragStartField(index, event) {
+    this.draggedItem = this.formFields[index];
+    this.draggedIndex = index;
+    this.placeholderIndex = index;
+  }
+
+
+  @action
+  dragOverField(event) {
+    event.preventDefault();
+  }
+
+
+  @action
+  dragDropField(index) {
+    const items = [...this.formFields];
+    const draggedItem = this.draggedItem;
+
+    items.splice(this.draggedIndex, 1);
+    items.splice(index, 0, draggedItem);
+
+    this.fieldService.currentFormFields = items;
+    this.formFields = items;
+
+    this.draggedItem = null;
+    this.draggedIndex = null;
+    this.placeholderIndex = null;
+  }
+
+}

formulaic/static/admin/formulaic/ember-formulaic/app/components/form.js

@@ -0,0 +1,9 @@
+//components/form.js
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormComponent extends Component {
+  @tracked isEditing = false;
+
+}