open-consul/ui/packages/consul-ui/app/components/data-sink/index.js
John Cowen c98130cc08
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00

110 lines
2.9 KiB
JavaScript

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { set, get, computed } from '@ember/object';
import { once } from 'consul-ui/utils/dom/event-source';
export default Component.extend({
tagName: '',
service: service('data-sink/service'),
dom: service('dom'),
logger: service('logger'),
onchange: function(e) {},
onerror: function(e) {},
state: computed('instance', 'instance.{dirtyType,isSaving}', function() {
let id;
const isSaving = get(this, 'instance.isSaving');
const dirtyType = get(this, 'instance.dirtyType');
if (typeof isSaving === 'undefined' && typeof dirtyType === 'undefined') {
id = 'idle';
} else {
switch (dirtyType) {
case 'created':
id = isSaving ? 'creating' : 'create';
break;
case 'updated':
id = isSaving ? 'updating' : 'update';
break;
case 'deleted':
case undefined:
id = isSaving ? 'removing' : 'remove';
break;
}
id = `active.${id}`;
}
return {
matches: name => id.indexOf(name) !== -1,
};
}),
init: function() {
this._super(...arguments);
this._listeners = this.dom.listeners();
},
willDestroyElement: function() {
this._super(...arguments);
this._listeners.remove();
},
source: function(cb) {
const source = once(cb);
const error = err => {
set(this, 'instance', undefined);
try {
this.onerror(err);
this.logger.execute(err);
} catch (err) {
this.logger.execute(err);
}
};
this._listeners.add(source, {
message: e => {
try {
set(this, 'instance', undefined);
this.onchange(e);
} catch (err) {
error(err);
}
},
error: e => error(e),
});
return source;
},
didInsertElement: function() {
this._super(...arguments);
if (typeof this.data !== 'undefined' || typeof this.item !== 'undefined') {
this.actions.open.apply(this, [this.data, this.item]);
}
},
persist: function(data, instance) {
if (typeof data !== 'undefined') {
set(this, 'instance', this.service.prepare(this.sink, data, instance));
} else {
set(this, 'instance', instance);
}
this.source(() => this.service.persist(this.sink, this.instance));
},
remove: function(instance) {
set(this, 'instance', instance);
this.source(() => this.service.remove(this.sink, instance));
},
actions: {
open: function(data, item) {
if (item instanceof Event) {
item = undefined;
}
if (typeof data === 'undefined' && typeof item === 'undefined') {
throw new Error('You must specify data to save, or null to remove');
}
// potentially allow {} and "" as 'remove' flags
if (data === null || data === '') {
this.remove(item);
} else {
this.persist(data, item);
}
},
},
});