Skip to content

Commit

Permalink
Update appManage template (temp)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tassoevan
tassoevan committed Jul 25, 2019
1 parent bac927b commit ccbd361
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 130 deletions.
14 changes: 8 additions & 6 deletions app/apps/client/admin/appManage.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
<!-- This page allows for settings to be changed but not all of them are implemented yet -->
<template name="appManage">
{{#with app}}
<section class="page-container page-home page-static page-settings rc-apps-marketplace">
<section class="page-container page-home page-static page-settings rc-apps-section">
{{# header sectionName='App_Details' fixedHeight=true hideHelp=true fullpage=true}}
<div class="rc-header__section-button">
{{#unless disabled}}
<button class="rc-button rc-button--cancel js-cancel-editing">{{_ "Cancel" }}</button>
{{#unless isSettingsPristine}}
<button class="rc-button rc-button--cancel js-cancel-editing-settings">{{_ "Cancel" }}</button>
{{/unless}}
<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{_ "Save_changes" }}</button>
<button class="rc-button rc-button--primary js-save-settings {{#if saving}} loading{{/if}}" disabled='{{isSettingsPristine}}'>{{_ "Save_changes" }}</button>
</div>

<div class="rc-header__block rc-header__block-action">
<button class="rc-button rc-button--nude js-cancel">{{> icon icon="cross"}}</button>
<button class="rc-button rc-button--nude js-close">
{{> icon icon="cross"}}
</button>
</div>
{{/header}}

<div class="content">
{{#requiresPermission 'manage-apps'}}
{{#if error}}
Expand Down
177 changes: 73 additions & 104 deletions app/apps/client/admin/appManage.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Meteor } from 'meteor/meteor';
import { ReactiveDict } from 'meteor/reactive-dict';
import { ReactiveVar } from 'meteor/reactive-var';
import { FlowRouter } from 'meteor/kadira:flow-router';
import { Template } from 'meteor/templating';
Expand All @@ -16,6 +17,12 @@ import { AppEvents } from '../communication';
import { Utilities } from '../../lib/misc/Utilities';
import { Apps } from '../orchestrator';
import { SideNav, popover } from '../../../ui-utils/client';
import {
formatPrice,
formatPricingPlan,
handleAPIError,
triggerButtonLoadingState,
} from './helpers';

import './appManage.html';
import './appManage.css';
Expand Down Expand Up @@ -127,48 +134,10 @@ const getApp = (instance) => {
});
};

const formatPrice = (price) => `\$${ Number.parseFloat(price).toFixed(2) }`;

const formatPricingPlan = (pricingPlan) => {
const perUser = pricingPlan.isPerSeat && pricingPlan.tiers && pricingPlan.tiers.length;

const pricingPlanTranslationString = [
'Apps_Marketplace_pricingPlan',
pricingPlan.strategy,
perUser && 'perUser',
].filter(Boolean).join('_');

return t(pricingPlanTranslationString, {
price: formatPrice(pricingPlan.price),
});
};

const handleAPIError = (e) => {
console.error(e);
toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
};

const triggerButtonLoadingState = (button) => {
const icon = button.querySelector('.rc-icon use');
const iconHref = icon.getAttribute('href');

button.classList.add('loading');
button.disabled = true;
icon.setAttribute('href', '#icon-loading');

return () => {
button.classList.remove('loading');
button.disabled = false;
icon.setAttribute('href', iconHref);
};
};

const promptSubscription = async (app, instance) => {
const { latest, purchaseType = 'buy' } = app;

let data = null;
try {
data = await APIClient.get(`apps?buildExternalUrl=true&appId=${ latest.id }&purchaseType=${ purchaseType }`);
data = await Apps.buildExternalUrl(app.id, app.purchaseType);
} catch (e) {
handleAPIError(e, instance);
return;
Expand All @@ -180,29 +149,20 @@ const promptSubscription = async (app, instance) => {
template: 'iframeModal',
}, async () => {
try {
await APIClient.post('apps/', {
appId: latest.id,
marketplace: true,
version: latest.version,
});
await Apps.installApp(app.id, app.version);
await getApp(instance);
} catch (e) {
handleAPIError(e, instance);
} catch (error) {
handleAPIError(error);
}
});
};

const viewLogs = ({ id }) => {
FlowRouter.go(`/admin/apps/${ id }/logs`, {}, { version: FlowRouter.getQueryParam('version') });
};

const setAppStatus = async (app, status, instance) => {
try {
const result = await APIClient.post(`apps/${ app.id }/status`, { status });
app.status = result.status;
app.status = await Apps.setAppStatus(app.id, status);
instance.app.set(app);
} catch (e) {
handleAPIError(e, instance);
} catch (error) {
handleAPIError(error);
}
};

Expand Down Expand Up @@ -230,15 +190,15 @@ const promptAppDeactivation = (app, instance) => {

const uninstallApp = async ({ id }, instance) => {
try {
await APIClient.delete(`apps/${ id }`);
await Apps.uninstallApp(id);
} catch (e) {
handleAPIError(e, instance);
}

try {
await getApp(instance);
} catch (e) {
handleAPIError(e, instance);
} catch (error) {
handleAPIError(error, instance);
}
};

Expand All @@ -261,7 +221,12 @@ const promptAppUninstall = (app, instance) => {
};

Template.appManage.onCreated(function() {
const instance = this;
this.state = new ReactiveDict({
app: {
id: FlowRouter.getParam('appId'),
},
});

this.id = new ReactiveVar(FlowRouter.getParam('appId'));
this.ready = new ReactiveVar(false);
this.error = new ReactiveVar('');
Expand All @@ -272,7 +237,7 @@ Template.appManage.onCreated(function() {
this.loading = new ReactiveVar(false);

const id = this.id.get();
getApp(instance);
getApp(this);

this.__ = (key, options, lang_tag) => {
const appKey = Utilities.getI18nKeyForApp(key, id);
Expand All @@ -284,63 +249,74 @@ Template.appManage.onCreated(function() {
return;
}

const app = instance.app.get();
const app = this.app.get();
app.status = status;
instance.app.set(app);
this.app.set(app);
};

this.onSettingUpdated = async ({ appId }) => {
if (appId !== id) {
return;
}

const { settings } = await APIClient.get(`apps/${ id }/settings`);
Object.keys(settings).forEach((k) => {
settings[k].i18nPlaceholder = settings[k].i18nPlaceholder || ' ';
settings[k].value = settings[k].value !== undefined && settings[k].value !== null ? settings[k].value : settings[k].packageValue;
settings[k].oldValue = settings[k].value;
settings[k].hasChanged = false;
});
const settings = await Apps.getAppSettings(id);
for (const setting of Object.values(settings)) {
setting.i18nPlaceholder = setting.i18nPlaceholder || ' ';
setting.value = setting.value !== undefined && setting.value !== null ? setting.value : setting.packageValue;
setting.oldValue = setting.value;
setting.hasChanged = false;
}

instance.settings.set(settings);
this.settings.set(settings);
};

this.onAppAdded = async (appId) => {
this.handleAppAdded = async (appId) => {
if (appId !== this.id.get()) {
return;
}

try {
await getApp(instance);
await getApp(this);
} catch (e) {
handleAPIError(e, this);
}
};

this.onAppRemoved = async (appId) => {
this.handleAppRemoved = async (appId) => {
if (appId !== this.id.get()) {
return;
}

try {
await getApp(instance);
await getApp(this);
} catch (e) {
handleAPIError(e, this);
}
};

Apps.getWsListener().registerListener(AppEvents.APP_ADDED, this.onAppAdded);
Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, this.onAppRemoved);
Apps.getWsListener().registerListener(AppEvents.APP_ADDED, this.handleAppAdded);
Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, this.handleAppRemoved);
});

Template.apps.onDestroyed(function() {
Apps.getWsListener().unregisterListener(AppEvents.APP_STATUS_CHANGE, this.onStatusChanged);
Apps.getWsListener().unregisterListener(AppEvents.APP_SETTING_UPDATED, this.onSettingUpdated);
Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, this.onAppAdded);
Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, this.onAppRemoved);
Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, this.handleAppAdded);
Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, this.handleAppRemoved);
});

Template.appManage.onRendered(() => {
Tracker.afterFlush(() => {
SideNav.setFlex('adminFlex');
SideNav.openFlex();
});
});

Template.appManage.helpers({
isSettingsPristine() {
const settings = Template.instance().settings.get();
return !Object.values(settings).some(({ hasChanged }) => hasChanged);
},
isInstalled() {
const app = Template.instance().app.get();
return app.installed;
Expand Down Expand Up @@ -406,11 +382,6 @@ Template.appManage.helpers({
const settings = Template.instance().settings.get();
return settings[_id].value === val;
},
disabled() {
const t = Template.instance();
const settings = t.settings.get();
return !Object.keys(settings).some((k) => settings[k].hasChanged);
},
isReady() {
if (Template.instance().ready) {
return Template.instance().ready.get();
Expand Down Expand Up @@ -467,11 +438,18 @@ Template.appManage.helpers({
});

Template.appManage.events({
'click .js-cancel-editing': async (e, t) => {
t.onSettingUpdated({ appId: t.id.get() });
'click .js-cancel-editing-settings'(event, instance) {
const settings = instance.settings.get();

for (const setting of Object.values(settings)) {
setting.value = setting.oldValue;
setting.hasChanged = false;
}

instance.settings.set(settings);
},

'click .js-save': async (e, t) => {
'click .js-save-settings': async (e, t) => {
if (t.loading.get()) {
return;
}
Expand All @@ -491,14 +469,12 @@ Template.appManage.events({
if (toSave.length === 0) {
throw new Error('Nothing to save..');
}
const result = await APIClient.post(`apps/${ t.id.get() }/settings`, undefined, { settings: toSave });
console.log('Updating results:', result);
result.updated.forEach((setting) => {
settings[setting.id].value = setting.value;
settings[setting.id].oldValue = setting.value;
const updated = await Apps.setAppSettings(t.id.get(), toSave);
updated.forEach(({ id, value }) => {
settings[id].value = value;
settings[id].oldValue = value;
});
Object.keys(settings).forEach((k) => {
const setting = settings[k];
Object.values(settings).forEach((setting) => {
setting.hasChanged = false;
});
t.settings.set(settings);
Expand All @@ -508,11 +484,9 @@ Template.appManage.events({
t.loading.set(false);
}
},

'click .js-cancel'() {
FlowRouter.go('/admin/apps');
'click .js-close'() {
window.history.back();
},

'click .js-menu'(e, instance) {
e.stopPropagation();
const { currentTarget } = e;
Expand All @@ -535,7 +509,9 @@ Template.appManage.events({
{
icon: 'list-alt',
name: t('View_Logs'),
action: () => viewLogs(app, instance),
action: () => {
FlowRouter.go(`/admin/apps/${ app.id }/logs`, {}, { version: FlowRouter.getQueryParam('version') });
},
},
],
},
Expand Down Expand Up @@ -686,10 +662,3 @@ Template.appManage.events({
}
}, 500),
});

Template.appManage.onRendered(() => {
Tracker.afterFlush(() => {
SideNav.setFlex('adminFlex');
SideNav.openFlex();
});
});
Loading

0 comments on commit ccbd361

Please sign in to comment.