Componentize

assets/javascripts/discourse/components/wizard-export.js.es6

@@ -0,0 +1,42 @@
+export default Ember.Component.extend({
+  classNames: ['container', 'export'],
+  selected: Ember.A(),
+
+  actions: {
+    checkChanged(event) {
+      this.set('exportMessage', '');
+
+      let selected = this.get('selected');
+
+      if (event.target.checked) {
+        selected.addObject(event.target.id);
+      } else if (!event.target.checked) {
+        selected.removeObject(event.target.id);
+      }
+
+      this.set('selected', selected);
+    },
+
+    export() {
+      const wizards = this.get('selected');
+
+      if (!wizards.length) {
+        this.set('exportMessage', I18n.t("admin.wizard.transfer.export.none_selected"));
+      } else {
+        this.set('exportMessage', '');
+
+        let url = Discourse.BaseUrl;
+        let route = '/admin/wizards/transfer/export';
+        url += route + '?';
+
+        wizards.forEach((wizard) => {
+          let step = 'wizards[]=' + wizard;
+          step += '&';
+          url += step;
+        });
+
+        location.href = url;
+      }
+    }
+  }
+});

assets/javascripts/discourse/components/wizard-import.js.es6

@@ -0,0 +1,81 @@
+import { ajax } from 'discourse/lib/ajax';
+import { default as computed } from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  classNames: ['container', 'import'],
+  hasLogs: Ember.computed.notEmpty('logs'),
+
+  @computed('successIds', 'failureIds')
+  logs(successIds, failureIds) {
+    let logs = [];
+
+    if (successIds) {
+      logs.push(...successIds.map(id => {
+        return { id, type: 'success' };
+      }));
+    }
+
+    if (failureIds) {
+      logs.push(...failureIds.map(id => {
+        return { id, type: 'failure' };
+      }));
+    }
+
+    return logs;
+  },
+
+  actions: {
+    setFilePath(event) {
+      this.set('importMessage', '');
+
+      // 512 kb is the max file size
+      let maxFileSize = 512 * 1024;
+
+      if (event.target.files[0] === undefined) {
+        this.set('filePath', null);
+        return;
+      }
+
+      if (maxFileSize < event.target.files[0].size) {
+        this.setProperties({
+          importMessage: I18n.t('admin.wizard.transfer.import.file_size_error'),
+          filePath: null
+        });
+        $('#file-url').val('');
+      } else {
+        this.set('filePath', event.target.files[0]);
+      }
+    },
+
+    import() {
+      const filePath = this.get('filePath');
+      let $formData = new FormData();
+
+      if (filePath) {
+        $formData.append('file', filePath);
+
+        ajax('/admin/wizards/transfer/import', {
+          type: 'POST',
+          data: $formData,
+          processData: false,
+          contentType: false,
+        }).then(result => {
+          if (result.error) {
+            this.set('importMessage', result.error);
+          } else {
+            this.setProperties({
+              successIds: result.success,
+              failureIds: result.failed,
+              fileName: $('#file-url')[0].files[0].name
+            });
+          }
+
+          this.set('filePath', null);
+          $('#file-url').val('');
+        });
+      } else {
+        this.set('importMessage', I18n.t("admin.wizard.transfer.import.no_file"));
+      }
+    }
+  }
+});

assets/javascripts/discourse/controllers/admin-wizards-transfer.js.es6

@@ -1,123 +1 @@
-import { ajax } from 'discourse/lib/ajax';
+export default Ember.Controller.extend();
-import { default as computed } from 'ember-addons/ember-computed-decorators';
-
-export default Ember.Controller.extend({
-  init() {
-    this._super();
-    this.setProperties({
-      selected: Ember.A()
-    });
-  },
-
-  @computed('successIds', 'failureIds')
-  logs(successIds, failureIds) {
-    let logs = [];
-
-    if (successIds) {
-      logs.push(...successIds.map(id => {
-        return { id, type: 'success' };
-      }));
-    }
-
-    if (failureIds) {
-      logs.push(...failureIds.map(id => {
-        return { id, type: 'failure' };
-      }));
-    }
-
-    return logs;
-  },
-
-  hasLogs: Ember.computed.notEmpty('logs'),
-
-  actions: {
-    checkChanged(event) {
-      this.set('exportMessage', '');
-
-      let selected = this.get('selected');
-
-      if (event.target.checked) {
-        selected.addObject(event.target.id);
-      } else if (!event.target.checked) {
-        selected.removeObject(event.target.id);
-      }
-
-      this.set('selected', selected);
-    },
-
-    export() {
-      const wizards = this.get('selected');
-
-      if (!wizards.length) {
-        this.set('exportMessage', I18n.t("admin.wizard.transfer.export.none_selected"));
-      } else {
-        this.set('exportMessage', '');
-
-        let url = Discourse.BaseUrl;
-        let route = '/admin/wizards/transfer/export';
-        url += route + '?';
-
-        wizards.forEach((wizard) => {
-          let step = 'wizards[]=' + wizard;
-          step += '&';
-          url += step;
-        });
-
-        location.href = url;
-      }
-    },
-
-    setFilePath(event) {
-      this.set('importMessage', '');
-
-      // 512 kb is the max file size
-      let maxFileSize = 512 * 1024;
-
-      if (event.target.files[0] === undefined) {
-        this.set('filePath', null);
-        return;
-      }
-
-      if (maxFileSize < event.target.files[0].size) {
-        this.setProperties({
-          importMessage: I18n.t('admin.wizard.transfer.import.file_size_error'),
-          filePath: null
-        });
-        $('#file-url').val('');
-      } else {
-        this.set('filePath', event.target.files[0]);
-      }
-    },
-
-    import() {
-      const filePath = this.get('filePath');
-      let $formData = new FormData();
-
-      if (filePath) {
-        $formData.append('file', filePath);
-
-        ajax('/admin/wizards/transfer/import', {
-          type: 'POST',
-          data: $formData,
-          processData: false,
-          contentType: false,
-        }).then(result => {
-          if (result.error) {
-            this.set('importMessage', result.error);
-          } else {
-            this.setProperties({
-              successIds: result.success,
-              failureIds: result.failed,
-              fileName: $('#file-url')[0].files[0].name
-            });
-          }
-
-          this.set('filePath', null);
-          $('#file-url').val('');
-        });
-      } else {
-        this.set('importMessage', I18n.t("admin.wizard.transfer.import.no_file"));
-      }
-    }
-  }
-});

assets/javascripts/discourse/templates/admin-wizards-transfer.hbs

@@ -1,62 +1,2 @@
-<div class="container export">
+{{wizard-export wizards=model}}
-  <h2>{{i18n 'admin.wizard.transfer.export.label'}}</h2>
+{{wizard-import}}
-  
-  <ul class="wizard-list-select">
-    {{#each model as |w|}}
-      <li>
-        {{input type="checkbox"
-                id=(dasherize w.id)
-                change=(action 'checkChanged')}}
-        {{#link-to "adminWizard" (dasherize w.id)}}
-          {{w.name}}
-        {{/link-to}}
-      </li>
-    {{/each}}
-  </ul>
-  
-  {{d-button id="export-button"
-             class="btn btn-primary side"
-             label="admin.wizard.transfer.export.label"
-             action=(action "export")}}
-  
-  {{#if exportMessage}}
-    <div class="export-message">
-      {{exportMessage}}
-    </div>
-  {{/if}}
-</div>
-
-<div class="container import">
-  <h2>{{i18n 'admin.wizard.transfer.import.label'}}</h2>
-
-  <div class="controls">
-    {{input id='file-url' type="file" change=(action "setFilePath")}}
-    
-    {{#if importMessage}}
-      <div class="import-message">
-        {{importMessage}}
-      </div>
-    {{/if}}
-    
-    {{d-button id="import-button"
-               class="btn btn-primary side"
-               label="admin.wizard.transfer.import.label"
-               action=(action "import")}}
-  </div>
-  
-  {{#if hasLogs}}
-    <div class="import-logs">
-      <div class="title">
-        {{i18n 'admin.wizard.transfer.import.logs' fileName=fileName}}
-      </div>
-      
-      <ul>
-        {{#each logs as |l|}}
-          <li class="import-log">
-            {{i18n (concat 'admin.wizard.transfer.import.' l.type) id=l.id}}
-          </li>
-        {{/each}}
-      </ul>
-    </div>
-  {{/if}}
-</div>

assets/javascripts/discourse/templates/components/wizard-export.hbs

@@ -0,0 +1,25 @@
+<h2>{{i18n 'admin.wizard.transfer.export.label'}}</h2>
+
+<ul class="wizard-list-select">
+  {{#each wizards as |w|}}
+    <li>
+      {{input type="checkbox"
+              id=(dasherize w.id)
+              change=(action 'checkChanged')}}
+      {{#link-to "adminWizard" (dasherize w.id)}}
+        {{w.name}}
+      {{/link-to}}
+    </li>
+  {{/each}}
+</ul>
+
+{{d-button id="export-button"
+           class="btn btn-primary side"
+           label="admin.wizard.transfer.export.label"
+           action=(action "export")}}
+
+{{#if exportMessage}}
+  <div class="export-message">
+    {{exportMessage}}
+  </div>
+{{/if}}

assets/javascripts/discourse/templates/components/wizard-import.hbs

@@ -0,0 +1,32 @@
+<h2>{{i18n 'admin.wizard.transfer.import.label'}}</h2>
+
+<div class="controls">
+  {{input id='file-url' type="file" change=(action "setFilePath")}}
+  
+  {{#if importMessage}}
+    <div class="import-message">
+      {{importMessage}}
+    </div>
+  {{/if}}
+  
+  {{d-button id="import-button"
+             class="btn btn-primary side"
+             label="admin.wizard.transfer.import.label"
+             action=(action "import")}}
+</div>
+
+{{#if hasLogs}}
+  <div class="import-logs">
+    <div class="title">
+      {{i18n 'admin.wizard.transfer.import.logs' fileName=fileName}}
+    </div>
+    
+    <ul>
+      {{#each logs as |l|}}
+        <li class="import-log">
+          {{i18n (concat 'admin.wizard.transfer.import.' l.type) id=l.id}}
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+{{/if}}