From 2784b5bf06eb49b4a884f14dd07e572d942c66bc Mon Sep 17 00:00:00 2001
From: Scott Erickson <sderickson@gmail.com>
Date: Wed, 27 Dec 2017 13:59:14 -0800
Subject: [PATCH] Refactor CLAsView into a Component

---
 app/templates/admin/clas.jade     | 16 ---------
 app/views/admin/CLAsComponent.vue | 54 +++++++++++++++++++++++++++++++
 app/views/admin/CLAsView.coffee   | 18 +----------
 3 files changed, 55 insertions(+), 33 deletions(-)
 delete mode 100644 app/templates/admin/clas.jade
 create mode 100644 app/views/admin/CLAsComponent.vue

diff --git a/app/templates/admin/clas.jade b/app/templates/admin/clas.jade
deleted file mode 100644
index d0e9f52de17..00000000000
--- a/app/templates/admin/clas.jade
+++ /dev/null
@@ -1,16 +0,0 @@
-div#cla-view.container
-  h1 CLAs
-
-  table.table.table-striped.table-bordered.table-condensed#clas
-    tbody
-      tr
-        th Name
-        th Email
-        th GitHub Username
-        th Created
-      tr(v-for="cla in clas")
-        td {{cla.name}}
-        td {{cla.email}}
-        td {{cla.githubUsername}}
-        td {{dateFormat(cla.created)}}
- 
diff --git a/app/views/admin/CLAsComponent.vue b/app/views/admin/CLAsComponent.vue
new file mode 100644
index 00000000000..1716d023876
--- /dev/null
+++ b/app/views/admin/CLAsComponent.vue
@@ -0,0 +1,54 @@
+<template lang="jade">
+div#admin-clas-view.container
+  h1 CLAs
+
+  table.table.table-striped.table-bordered.table-condensed#clas
+    tbody
+      tr
+        th Name
+        th Email
+        th GitHub Username
+        th Created
+      tr(v-for="cla in clas")
+        td {{cla.name}}
+        td {{cla.email}}
+        td {{cla.githubUsername}}
+        td {{dateFormat(cla.created)}}
+</template>
+
+<script lang="coffee">
+co = require('co')
+api = require 'core/api'
+
+CLAsComponent = {
+  data: ->
+    clas: []
+
+  methods:
+    dateFormat: (s) -> moment(s).format('llll')
+
+  created: co.wrap ->
+    clas = yield api.clas.getAll()
+    clas = _.sortBy(clas, (cla) -> (cla.githubUsername || 'zzzzzz').toLowerCase())
+    clas = _.uniq(clas, true, 'githubUsername')
+    @clas = clas
+}
+
+`export default CLAsComponent`
+
+</script>
+
+<style lang="sass">
+@import "app/styles/bootstrap/variables"
+
+#admin-clas-view
+  background-color: white
+
+  padding: 50px 0 200px
+
+  table
+    font-size: 11px
+
+  hr
+    border: 1px solid black
+</style>
diff --git a/app/views/admin/CLAsView.coffee b/app/views/admin/CLAsView.coffee
index 10a260a74bd..0589e78d3a9 100644
--- a/app/views/admin/CLAsView.coffee
+++ b/app/views/admin/CLAsView.coffee
@@ -1,23 +1,7 @@
 RootComponent = require 'views/core/RootComponent'
 template = require 'templates/base-flat'
-co = require('co')
-api = require 'core/api'
 
-CLAsComponent = Vue.extend({
-  data: ->
-    clas: []
-    
-  template: require('templates/admin/clas')()
-  
-  methods:
-    dateFormat: (s) -> moment(s).format('llll')
-    
-  created: co.wrap ->
-    clas = yield api.clas.getAll()
-    clas = _.sortBy(clas, (cla) -> (cla.githubUsername || 'zzzzzz').toLowerCase())
-    clas = _.uniq(clas, true, 'githubUsername')
-    @clas = clas
-})
+CLAsComponent = Vue.extend(require('./CLAsComponent.vue')['default'])
 
 module.exports = class CLAsView extends RootComponent
   id: 'admin-clas-view'