This is an automated email from the ASF dual-hosted git repository.

rubys pushed a commit to branch roster_on_vue
in repository https://gitbox.apache.org/repos/asf/whimsy.git

commit a146f65b6d83a630d2f3864ee6ca591c7b392c1f
Author: Sam Ruby <[email protected]>
AuthorDate: Sun Sep 3 14:22:43 2017 -0400

    Convert Roster tool from React.js to Vue.js
    
    Depends on new logic in wunderbar and ruby2js.
    
    Additionally:
    
      classes inherits from Vue instead of React
    
      lifecycle methods name changes, e.g.:
        componentWillReceiveProps => created
        componentDidMount => mounted
    
      React specific methods:
        self.forceUpdate => Vue.forceUpdate
    
      form changes
        onChange => onInput or onClick depending on the element type
        defaultValue => value
    
      logic changes:
        need to pass event as a separate property so that updates are propagated
    
        previous logic depended on react specific properties (state, props),
        for now, I've made a copy of Vue equivalents in these names.  This was
        only done in one place.
---
 www/roster/Gemfile                     |  2 +-
 www/roster/main.rb                     |  2 +-
 www/roster/views/committerSearch.js.rb |  7 +++---
 www/roster/views/confirm.js.rb         |  2 +-
 www/roster/views/group.js.rb           | 15 +++++--------
 www/roster/views/person.js.rb          | 41 +++++++++++++++-------------------
 www/roster/views/person/email.js.rb    |  2 +-
 www/roster/views/person/forms.js.rb    |  2 +-
 www/roster/views/person/fullname.js.rb | 10 ++++-----
 www/roster/views/person/github.js.rb   |  6 ++---
 www/roster/views/person/memstat.js.rb  |  4 ++--
 www/roster/views/person/memtext.rb     |  6 ++---
 www/roster/views/person/pgpkeys.js.rb  |  2 +-
 www/roster/views/person/sascore.js.rb  |  6 ++---
 www/roster/views/person/sshkeys.js.rb  |  3 +--
 www/roster/views/person/urls.js.rb     |  2 +-
 www/roster/views/pmc/add.js.rb         |  6 ++---
 www/roster/views/pmc/committers.js.rb  | 11 +++------
 www/roster/views/pmc/main.js.rb        | 13 ++++-------
 www/roster/views/pmc/mod.js.rb         |  4 ++--
 www/roster/views/pmc/pmc.js.rb         | 23 ++++---------------
 www/roster/views/pmc/roster.js.rb      |  2 +-
 www/roster/views/ppmc/add.js.rb        |  4 ++--
 www/roster/views/ppmc/committers.js.rb | 11 +++------
 www/roster/views/ppmc/graduate.js.rb   |  2 +-
 www/roster/views/ppmc/main.js.rb       | 13 ++++-------
 www/roster/views/ppmc/members.js.rb    | 11 +++------
 www/roster/views/ppmc/mentors.js.rb    | 11 +++------
 www/roster/views/ppmc/mod.js.rb        |  4 ++--
 www/roster/views/ppmc/roster.js.rb     |  2 +-
 30 files changed, 87 insertions(+), 142 deletions(-)

diff --git a/www/roster/Gemfile b/www/roster/Gemfile
index 2aa2dd3..1a6dd03 100644
--- a/www/roster/Gemfile
+++ b/www/roster/Gemfile
@@ -13,7 +13,7 @@ else
 end
 
 gem 'rake'
-gem 'wunderbar', '~> 1.1.1'
+gem 'wunderbar', '~> 1.2'
 gem 'ruby2js', '>= 2.0.0'
 gem 'sinatra', '~> 2.0'
 gem 'nokogumbo'
diff --git a/www/roster/main.rb b/www/roster/main.rb
index 21d8faf..942f634 100755
--- a/www/roster/main.rb
+++ b/www/roster/main.rb
@@ -11,7 +11,7 @@ require 'tmpdir'
 
 require 'wunderbar/sinatra'
 require 'wunderbar/bootstrap/theme'
-require 'wunderbar/react'
+require 'wunderbar/vue'
 require 'wunderbar/underscore'
 require 'wunderbar/markdown'
 require 'wunderbar/jquery/stupidtable'
diff --git a/www/roster/views/committerSearch.js.rb 
b/www/roster/views/committerSearch.js.rb
index 7c0c17b..9a71cb3 100644
--- a/www/roster/views/committerSearch.js.rb
+++ b/www/roster/views/committerSearch.js.rb
@@ -1,4 +1,4 @@
-class CommitterSearch < React
+class CommitterSearch < Vue
   def initialize
     @list = []
     @ready = false
@@ -6,7 +6,7 @@ class CommitterSearch < React
     @committers = []
   end
 
-  def componentDidMount()
+  def mounted()
     # start with (possibly stale) data from local storage when available
     ls_committers = localStorage.getItem('roster-committers')
     if ls_committers
@@ -60,7 +60,8 @@ class CommitterSearch < React
       _label.control_label.col_sm_3 'Search for', for:  'search-text'
       _div.col_sm_9 do
         _div.input_group do
-          _input.form_control autofocus: true, value: @search, onChange: 
self.change
+          _input.form_control autofocus: true, value: @search, 
+            onInput: self.change
           _span.input_group_addon do
             _span.glyphicon.glyphicon_user aria_label: "Committer ID or name"
           end
diff --git a/www/roster/views/confirm.js.rb b/www/roster/views/confirm.js.rb
index 7d1f3ad..57baa8c 100644
--- a/www/roster/views/confirm.js.rb
+++ b/www/roster/views/confirm.js.rb
@@ -2,7 +2,7 @@
 # Confirmation dialog
 #
 
-class Confirm < React
+class Confirm < Vue
   def initialize
     @text = 'text'
     @color = 'btn-default'
diff --git a/www/roster/views/group.js.rb b/www/roster/views/group.js.rb
index 73b3668..f0aff78 100644
--- a/www/roster/views/group.js.rb
+++ b/www/roster/views/group.js.rb
@@ -2,7 +2,7 @@
 # Show a committee
 #
 
-class Group < React
+class Group < Vue
   def initialize
     @state = :closed
     @pending = {}
@@ -72,12 +72,7 @@ class Group < React
   end
 
   # capture group on initial load
-  def componentWillMount()
-    self.update(@@group)
-  end
-
-  # capture group on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@group)
   end
 
@@ -109,7 +104,7 @@ end
 # Show a member of the Group
 #
 
-class GroupMember < React
+class GroupMember < Vue
   def initialize
     @state = :closed
   end
@@ -157,7 +152,7 @@ end
 # Confirmation dialog
 #
 
-class GroupConfirm < React
+class GroupConfirm < Vue
   def initialize
     @text = 'text'
     @color = 'btn-default'
@@ -194,7 +189,7 @@ class GroupConfirm < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#confirm').on('show.bs.modal') do |event|
       button = event.relatedTarget
       @id = button.parentNode.dataset.id
diff --git a/www/roster/views/person.js.rb b/www/roster/views/person.js.rb
index d63cf08..198aa7a 100644
--- a/www/roster/views/person.js.rb
+++ b/www/roster/views/person.js.rb
@@ -1,4 +1,4 @@
-class Person < React
+class Person < Vue
   def initialize
     @committer = {}
     @response = nil
@@ -13,7 +13,7 @@ class Person < React
     _h2 "#{@committer.id}@apache.org"
 
     # Name
-    _PersonName person: self
+    _PersonName person: self, edit: @edit
 
     _div.row do
       _div.name 'LDAP Create Date'
@@ -139,15 +139,15 @@ class Person < React
 
     # GitHub username
     if @committer.githubUsername
-      _PersonGitHub person: self
+      _PersonGitHub person: self, edit: @edit
     end
 
     if @committer.member
-      _PersonMemberStatus person: self
+      _PersonMemberStatus person: self, edit: @edit
 
       # Members.txt
       if @committer.member.info
-        _PersonMemberText person: self
+        _PersonMemberText person: self, edit: @edit
       end
 
       if @committer.member.nomination
@@ -164,7 +164,7 @@ class Person < React
     end
 
     # SpamAssassin score
-    _PersonSascore person: self
+    _PersonSascore person: self, edit: @edit
 
     # modal dialog for dry run results
     _div.modal.fade.wide_form tabindex: -1 do
@@ -185,24 +185,22 @@ class Person < React
     end
   end
 
-  # capture committer on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
+  # initialize committer, determine if user is authorized to make
+  # changes, map Vue model to React model
+  def created()
+    @committer = @@committer
+    @auth = (@@auth.id == @@committer.id or @@auth.secretary or @@auth.root)
 
-  # replace committer on change, determine if user is authorized to make
-  # changes
-  def componentWillReceiveProps()
-    if @committer.id != @@committer.id
-      @committer = @@committer
-      @auth = (@@auth.id == @@committer.id or @@auth.secretary or @@auth.root)
-    end
+    # map Vue model to React model
+    self.state = self['$data']
+    self.props = self['$props']
   end
 
   # on initial display, look for add editable rows, highlight them,
   # and watch for double clicks on them
-  def componentDidMount()
+  def mounted()
     return unless @auth
+
     Array(document.querySelectorAll('div.row[data-edit]')).each do |div|
       div.addEventListener('dblclick', self.dblclick)
       div.querySelector('div.name').classList.add 'bg-success'
@@ -212,15 +210,12 @@ class Person < React
   # when a double click occurs, toggle the associated state
   def dblclick(event)
     tr = event.currentTarget
-    field = "edit_#{tr.dataset.edit}"
-    changes = {}
-    changes[field] = !self.state[field]
-    self.setState changes
+    @edit = tr.dataset.edit
     window.getSelection().removeAllRanges()
   end
 
   # after update, register event listeners on forms
-  def componentDidUpdate()
+  def updated()
     Array(document.querySelectorAll('div[data-edit]')).each do |tr|
       form = tr.querySelector('form')
       if form
diff --git a/www/roster/views/person/email.js.rb 
b/www/roster/views/person/email.js.rb
index ce8f6cf..ee3fd55 100644
--- a/www/roster/views/person/email.js.rb
+++ b/www/roster/views/person/email.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's E-mail addresses
 #
 
-class PersonEmail < React
+class PersonEmail < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/person/forms.js.rb 
b/www/roster/views/person/forms.js.rb
index 4824c97..be7702a 100644
--- a/www/roster/views/person/forms.js.rb
+++ b/www/roster/views/person/forms.js.rb
@@ -2,7 +2,7 @@
 # Show a list of a person's forms on file
 #
 
-class PersonForms < React
+class PersonForms < Vue
   def render
     committer = @@person.state.committer
     documents = "https://svn.apache.org/repos/private/documents";
diff --git a/www/roster/views/person/fullname.js.rb 
b/www/roster/views/person/fullname.js.rb
index b4a5435..c75cd8a 100644
--- a/www/roster/views/person/fullname.js.rb
+++ b/www/roster/views/person/fullname.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's name
 #
 
-class PersonName < React
+class PersonName < Vue
   def render
     committer = @@person.state.committer
 
@@ -12,25 +12,25 @@ class PersonName < React
       _div.value do
         name = committer.name
 
-        if @@person.state.edit_fullname
+        if @@edit == :fullname
 
           _form.inline method: 'post' do
             _div do
               _label 'public name', for: 'publicname'
               _input.publicname! name: 'publicname', required: true,
-                defaultValue: name.public_name
+                value: name.public_name
             end
 
             _div do
               _label 'legal name', for: 'legalname'
               _input.legalname! name: 'legalname', required: true,
-                defaultValue: name.legal_name
+                value: name.legal_name
             end
 
             _div do
               _label 'given name', for: 'givenname'
               _input.legalname! name: 'givenname', required: true,
-                defaultValue: name.given_name
+                value: name.given_name
             end
 
             _button.btn.btn_primary 'submit'
diff --git a/www/roster/views/person/github.js.rb 
b/www/roster/views/person/github.js.rb
index 7125db9..27a9195 100644
--- a/www/roster/views/person/github.js.rb
+++ b/www/roster/views/person/github.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's GitHub user name
 #
 
-class PersonGitHub < React
+class PersonGitHub < Vue
   def render
     committer = @@person.state.committer
 
@@ -11,10 +11,10 @@ class PersonGitHub < React
 
       _div.value do
 
-        if @@person.state.edit_github
+        if @@edit == :github
 
           _form method: 'post' do
-            _input name: 'githubuser', defaultValue: committer.githubUsername
+            _input name: 'githubuser', value: committer.githubUsername
             _input type: 'submit', value: 'submit'
           end
 
diff --git a/www/roster/views/person/memstat.js.rb 
b/www/roster/views/person/memstat.js.rb
index d9db838..e108d16 100644
--- a/www/roster/views/person/memstat.js.rb
+++ b/www/roster/views/person/memstat.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's member status
 #
 
-class PersonMemberStatus < React
+class PersonMemberStatus < Vue
   def render
     committer = @@person.state.committer
 
@@ -13,7 +13,7 @@ class PersonMemberStatus < React
         _div.value do
           _span committer.member.status
 
-         if @@person.state.edit_memstat
+         if @@edit == :memstat
            _form.inline method: 'post' do
              if committer.member.status.include? 'Active'
                _button.btn.btn_primary 'move to emeritus',
diff --git a/www/roster/views/person/memtext.rb 
b/www/roster/views/person/memtext.rb
index d1d0ca5..ad3b9b7 100644
--- a/www/roster/views/person/memtext.rb
+++ b/www/roster/views/person/memtext.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's members.txt entry
 #
 
-class PersonMemberText < React
+class PersonMemberText < Vue
   def render
     committer = @@person.state.committer
 
@@ -10,11 +10,11 @@ class PersonMemberText < React
       _div.name 'Members.txt'
 
       _div.value do
-        if @@person.state.edit_memtext
+        if @@edit == :memtext
 
           _form.inline method: 'post' do
             _div do
-              _textarea name: 'entry', defaultValue: committer.member.info
+              _textarea committer.member.info, name: 'entry'
             end
             _button.btn.btn_primary 'submit'
           end
diff --git a/www/roster/views/person/pgpkeys.js.rb 
b/www/roster/views/person/pgpkeys.js.rb
index a700637..453fbd7 100644
--- a/www/roster/views/person/pgpkeys.js.rb
+++ b/www/roster/views/person/pgpkeys.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's PGP keys
 #
 
-class PersonPgpKeys < React
+class PersonPgpKeys < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/person/sascore.js.rb 
b/www/roster/views/person/sascore.js.rb
index 65d2419..1cc17dc 100644
--- a/www/roster/views/person/sascore.js.rb
+++ b/www/roster/views/person/sascore.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's SpamAssassin score
 #
 
-class PersonSascore < React
+class PersonSascore < Vue
   def render
     committer = @@person.state.committer
 
@@ -11,11 +11,11 @@ class PersonSascore < React
 
       _div.value do
 
-        if @@person.state.edit_sascore
+        if @@edit == :sascore
 
           _form method: 'post' do
             _input type: 'number', min: 0, max: 10, 
-              name: 'sascore', defaultValue: committer.sascore
+              name: 'sascore', value: committer.sascore
             _input type: 'submit', value: 'submit'
           end
 
diff --git a/www/roster/views/person/sshkeys.js.rb 
b/www/roster/views/person/sshkeys.js.rb
index 78014cd..6b4ecdf 100644
--- a/www/roster/views/person/sshkeys.js.rb
+++ b/www/roster/views/person/sshkeys.js.rb
@@ -2,14 +2,13 @@
 # Render and edit a person's SSH keys
 #
 
-class PersonSshKeys < React
+class PersonSshKeys < Vue
   def render
     committer = @@person.state.committer
 
     _div.row do
       _div.name 'SSH keys'
 
-
       _div.value do
         _ul committer.ssh do |key|
           _li.ssh do
diff --git a/www/roster/views/person/urls.js.rb 
b/www/roster/views/person/urls.js.rb
index a449bf1..660e4c6 100644
--- a/www/roster/views/person/urls.js.rb
+++ b/www/roster/views/person/urls.js.rb
@@ -2,7 +2,7 @@
 # Render and edit a person's URLs
 #
 
-class PersonUrls < React
+class PersonUrls < Vue
   def render
     committer = @@person.state.committer
 
diff --git a/www/roster/views/pmc/add.js.rb b/www/roster/views/pmc/add.js.rb
index ee3537c..cb27e71 100644
--- a/www/roster/views/pmc/add.js.rb
+++ b/www/roster/views/pmc/add.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PMCAdd < React
+class PMCAdd < Vue
   def initialize
     @people = []
   end
@@ -67,7 +67,7 @@ class PMCAdd < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#pmcadd').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#pmcadd input').focus() }
@@ -76,7 +76,7 @@ class PMCAdd < React
 
   def add(person)
     @people << person
-    self.forceUpdate()
+    Vue.forceUpdate()
     jQuery('#pmcadd input').focus()
   end
 
diff --git a/www/roster/views/pmc/committers.js.rb 
b/www/roster/views/pmc/committers.js.rb
index a108ad5..61b1548 100644
--- a/www/roster/views/pmc/committers.js.rb
+++ b/www/roster/views/pmc/committers.js.rb
@@ -2,7 +2,7 @@
 # Committers on the PMC
 #
 
-class PMCCommitters < React
+class PMCCommitters < Vue
   def render
     if
       @@committee.committers.all? do |id|
@@ -35,13 +35,8 @@ class PMCCommitters < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute list of committers
-  def componentWillReceiveProps()
+  def created()
     committers = []
     
     @@committee.committers.each do |id|
@@ -58,7 +53,7 @@ end
 # Show a committer
 #
 
-class PMCCommitter < React
+class PMCCommitter < Vue
   def render
     _tr do
       if @@auth
diff --git a/www/roster/views/pmc/main.js.rb b/www/roster/views/pmc/main.js.rb
index b7f9288..c632e94 100644
--- a/www/roster/views/pmc/main.js.rb
+++ b/www/roster/views/pmc/main.js.rb
@@ -2,7 +2,7 @@
 # Show a PMC
 #
 
-class PMC < React
+class PMC < Vue
   def initialize
     @attic = nil
   end
@@ -192,21 +192,16 @@ class PMC < React
   end
 
   # capture committee on initial load
-  def componentWillMount()
-    self.update(@@committee)
-  end
-
-  # capture committee on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@committee)
   end
 
   # refresh the current page
   def refresh()
-    self.forceUpdate()
+    Vue.forceUpdate()
   end
 
-  def componentDidMount()
+  def mounted()
     # export refesh method
     PMC.refresh = self.refresh
   end
diff --git a/www/roster/views/pmc/mod.js.rb b/www/roster/views/pmc/mod.js.rb
index 32ca7eb..fb5d8e7 100644
--- a/www/roster/views/pmc/mod.js.rb
+++ b/www/roster/views/pmc/mod.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PMCMod < React
+class PMCMod < Vue
   def initialize
     @people = []
   end
@@ -68,7 +68,7 @@ class PMCMod < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#pmcmod').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#pmcmod input').focus() }
diff --git a/www/roster/views/pmc/pmc.js.rb b/www/roster/views/pmc/pmc.js.rb
index ec14053..1c63fb8 100644
--- a/www/roster/views/pmc/pmc.js.rb
+++ b/www/roster/views/pmc/pmc.js.rb
@@ -2,7 +2,7 @@
 # Show PMC members
 #
 
-class PMCMembers < React
+class PMCMembers < Vue
   def initialize
     @committee = {}
   end
@@ -27,13 +27,8 @@ class PMCMembers < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     for id in @@committee.roster
@@ -52,7 +47,7 @@ end
 # Show a member of the PMC
 #
 
-class PMCMember < React
+class PMCMember < Vue
   def initialize
     @state = :closed
   end
@@ -62,7 +57,7 @@ class PMCMember < React
       if @@auth
         _td do
            _input type: 'checkbox', checked: @@person.selected || false,
-             onChange: -> {self.toggleSelect(@@person)}
+             onClick: -> {self.toggleSelect(@@person)}
         end
       end
 
@@ -145,16 +140,6 @@ class PMCMember < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
-  # automatically close entries when id changes
-  def componentWillReceiveProps(newprops)
-    @state = :closed if newprops.person.id != self.props.person.id
-  end
-
   # toggle display of buttons
   def select()
     return unless @@auth
diff --git a/www/roster/views/pmc/roster.js.rb 
b/www/roster/views/pmc/roster.js.rb
index 572f92d..610e6c4 100644
--- a/www/roster/views/pmc/roster.js.rb
+++ b/www/roster/views/pmc/roster.js.rb
@@ -2,7 +2,7 @@
 # Searchable PMC roster
 #
 
-class PMCRoster < React
+class PMCRoster < Vue
   def render
     matches = []
     found = false
diff --git a/www/roster/views/ppmc/add.js.rb b/www/roster/views/ppmc/add.js.rb
index b6aaf61..d65cd26 100644
--- a/www/roster/views/ppmc/add.js.rb
+++ b/www/roster/views/ppmc/add.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PPMCAdd < React
+class PPMCAdd < Vue
   def initialize
     @people = []
   end
@@ -78,7 +78,7 @@ class PPMCAdd < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#ppmcadd').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#ppmcadd input').focus() }
diff --git a/www/roster/views/ppmc/committers.js.rb 
b/www/roster/views/ppmc/committers.js.rb
index 3a07ca6..18811ef 100644
--- a/www/roster/views/ppmc/committers.js.rb
+++ b/www/roster/views/ppmc/committers.js.rb
@@ -2,7 +2,7 @@
 # Committers on the PPMC
 #
 
-class PPMCCommitters < React
+class PPMCCommitters < Vue
   def render
     pending = [] 
 
@@ -52,13 +52,8 @@ class PPMCCommitters < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute list of committers
-  def componentWillReceiveProps()
+  def created()
     committers = []
     
     @@ppmc.committers.each do |id|
@@ -81,7 +76,7 @@ end
 # Show a committer
 #
 
-class PPMCCommitter < React
+class PPMCCommitter < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/graduate.js.rb 
b/www/roster/views/ppmc/graduate.js.rb
index 7e23942..6b64ffd 100644
--- a/www/roster/views/ppmc/graduate.js.rb
+++ b/www/roster/views/ppmc/graduate.js.rb
@@ -2,7 +2,7 @@
 # Draft an "Establish" resolution for a new PMC
 #
 
-class PPMCGraduate < React
+class PPMCGraduate < Vue
   def initialize
     @owners = []
   end
diff --git a/www/roster/views/ppmc/main.js.rb b/www/roster/views/ppmc/main.js.rb
index ce476c9..ce1a37e 100644
--- a/www/roster/views/ppmc/main.js.rb
+++ b/www/roster/views/ppmc/main.js.rb
@@ -2,7 +2,7 @@
 # Show a PPMC
 #
 
-class PPMC < React
+class PPMC < Vue
   def initialize
     @create_disabled = false
   end
@@ -207,12 +207,7 @@ class PPMC < React
   end
 
   # capture ppmc on initial load
-  def componentWillMount()
-    self.update(@@ppmc)
-  end
-
-  # capture ppmc on subsequent loads
-  def componentWillReceiveProps()
+  def created()
     self.update(@@ppmc)
   end
 
@@ -223,10 +218,10 @@ class PPMC < React
 
   # refresh the current page
   def refresh()
-    self.forceUpdate()
+    Vue.forceUpdate()
   end
 
-  def componentDidMount()
+  def mounted()
     # export refesh method
     PPMC.refresh = self.refresh
   end
diff --git a/www/roster/views/ppmc/members.js.rb 
b/www/roster/views/ppmc/members.js.rb
index c607020..b18e3a1 100644
--- a/www/roster/views/ppmc/members.js.rb
+++ b/www/roster/views/ppmc/members.js.rb
@@ -2,7 +2,7 @@
 # Show PPMC members
 #
 
-class PPMCMembers < React
+class PPMCMembers < Vue
   def render
     pending = [] 
 
@@ -48,13 +48,8 @@ class PPMCMembers < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     @@ppmc.owners.each do |id|
@@ -77,7 +72,7 @@ end
 # Show a member of the PPMC
 #
 
-class PPMCMember < React
+class PPMCMember < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/mentors.js.rb 
b/www/roster/views/ppmc/mentors.js.rb
index aa036f1..31d0fa7 100644
--- a/www/roster/views/ppmc/mentors.js.rb
+++ b/www/roster/views/ppmc/mentors.js.rb
@@ -2,7 +2,7 @@
 # Show PPMC mentors
 #
 
-class PPMCMentors < React
+class PPMCMentors < Vue
   def initialize
     @ipmc = []
   end
@@ -51,13 +51,8 @@ class PPMCMentors < React
     end
   end
 
-  # update props on initial load
-  def componentWillMount()
-    self.componentWillReceiveProps()
-  end
-
   # compute roster
-  def componentWillReceiveProps()
+  def created()
     roster = []
     
     @@ppmc.mentors.each do |id|
@@ -98,7 +93,7 @@ end
 # Show a mentor of the PPMC
 #
 
-class PPMCMentor < React
+class PPMCMentor < Vue
   def render
     _tr do
 
diff --git a/www/roster/views/ppmc/mod.js.rb b/www/roster/views/ppmc/mod.js.rb
index 28aaed4..eb42ac3 100644
--- a/www/roster/views/ppmc/mod.js.rb
+++ b/www/roster/views/ppmc/mod.js.rb
@@ -2,7 +2,7 @@
 # Add People to a project
 #
 
-class PPMCMod < React
+class PPMCMod < Vue
   def initialize
     @people = []
   end
@@ -86,7 +86,7 @@ class PPMCMod < React
     end
   end
 
-  def componentDidMount()
+  def mounted()
     jQuery('#ppmcmod').on('show.bs.modal') do |event|
       button = event.relatedTarget
       setTimeout(500) { jQuery('#ppmcmod input').focus() }
diff --git a/www/roster/views/ppmc/roster.js.rb 
b/www/roster/views/ppmc/roster.js.rb
index 3cf0fb7..bcbf226 100644
--- a/www/roster/views/ppmc/roster.js.rb
+++ b/www/roster/views/ppmc/roster.js.rb
@@ -2,7 +2,7 @@
 # Searchable PPMC roster
 #
 
-class PPMCRoster < React
+class PPMCRoster < Vue
   def render
     matches = []
     found = false

-- 
To stop receiving notification emails like this one, please contact
"[email protected]" <[email protected]>.

Reply via email to