canvasapp/templates/dir.html

<style>
body, select { font-family: arial; font-size: 0.75rem; }
.line span { display: inline-block; width: 16%; }
div.line { border-bottom: 1px solid lightgrey; margin-bottom: 4px; }
th { text-align:left; border-bottom: 1px solid lightgrey; cursor: pointer; }
.linehead span { font-weight: bold; }
</style>
<!--<script src='/data/gui/lib/lodash.js'></script>-->
<script src='/data/gui/lib/underscore-min.js'></script>
<script src='/data/gui/lib/vue.js'></script>
<script src='/data/gui/lib/jacks.min.js'></script>              <!-- https://github.com/jccazeaux/jacks -->
<script src='/data/gui/lib/vue-good-table.min.js'></script> 
<script>
    var margin = {top: 20, right: 20, bottom: 70, left: 40}
    var appdata = { users:[], depts:[], titles:[],       
        columns: [
        {
          label: ' ',
          field: 'picture',
        },
        {
          label: 'Last',
          field: 'last_name',
        },
        {
          label: 'First',
          field: 'first_name',
        },
        {
          label: 'Department',
          field: 'd1',
        },
        {
          label: 'Phone',
          field: 'phone_number',
        },
        {
          label: 'Email',
          field: 'email',
        },
        {
          label: 'Room',
          field: 'room',
        },
      ],
      }
    Vue.config.devtools = true;

</script>
<div id="staff_dir"> 

    <vue-good-table
      :columns="columns"
      :rows="users" 
      :search-options="{
        enabled: true}">
  </vue-good-table>

        <br /><br />
  <!--<div class="line linehead">
  <span>Name</span>
  <span>Title</span>
  <span>Department</span>
  <span>Old Department</span>
  <span>Email</span>
  <span>Phone</span>
  </div><user-line v-for="p,i in users" v-bind:user="p"
  v-bind:key="'usr_'+i"></user-line>-->
</div>

<script>

Vue.component('popup-field', {
    props: ['fieldname', 'values',   // an array of objs: {'text':'t', 'value':'v' }
            'init_val', 'userid'],
    data: function() { return {'selected':this.init_val, 'a':'b'} },
    delimiters: ['[[', ']]'],
    methods: {
        new_val: function() { 
            jacks().get("/api/update_pers_dept/" + this.userid + "/" + this.selected)
                .header("Accepts", "application/json")
                .send( function(resp) { console.log("Tried to update department.")
                                        console.log(resp) } )
                  },
    },
    template: `<select v-model="selected" @change="new_val()" >
        <option v-for="k in values" :value="k.id">[[ k.name ]]</option>
    </select>`
})

Vue.component('popup-title-field', {
    props: ['fieldname', 'values', 
            'init_val', 'userid'],
    data: function() { return {'selected':this.init_val, 'a':'b'} },
    delimiters: ['[[', ']]'],
    methods: {
        new_val: function() { 
            jacks().get("/api/update_pers_title/" + this.userid + "/" + this.selected)
                .header("Accepts", "application/json")
                .send( function(resp) { console.log("Tried to update title.")
                                        console.log(resp) } )
                  },
    },
    template: `<select v-model="selected" @change="new_val()" >
        <option v-for="k in values" :value="k.id">[[ k.name ]]</option>
    </select>`
})

Vue.component('user-line', {
  props: [ 'user', ],
  data: function () {
      return { "a": "a", "b": "b" }
  },
  delimiters: ['[[', ']]'],
  methods: {
      update2: _.debounce( function(column, row, newval) {         
        jacks().get("/api/update_pers_dept/" + row + "/" + newval)
            .header("Accepts", "application/json")
            .send( function(resp) { console.log("Tried to update department.")
                                    console.log(resp) } )
      }, 300),
      update: function(column, row, newval) {         }
  },
  template: `<div class="line">
  <span>[[ user.first_name ]] [[ user.last_name ]]</span>
  <span>
    <popup-title-field :fieldname="'title'" :values="this.$root.titles"
        :init_val="user.titleid" :userid="user.id" ></popup-title-field> 
  </span>
  <span>
    <popup-field :fieldname="'dept1'" :values="this.$root.depts"
        :init_val="user.dept1" :userid="user.id" ></popup-field> 
  </span>
  <span>[[ user.old_dept ]]</span>
  <span>[[ user.email ]]</span>
  <span>[[ user.phone_number ]]</span>
</div>`
}) 



var vm = new Vue({
    data: appdata, 
    el: '#staff_dir',
    delimiters: ['[[', ']]'],
    methods: { 
      pretty_session: function(ses) { },
	  remove: function (event) { console.log(event); console.log(this);  
      }},
    computed: {
        }
}); 

jacks().get("/api/personnel_fetch")
    .header("Accepts", "application/json")
    .send( function(resp) { vm.users = JSON.parse(resp.response)
                            console.log(vm.users) } )

jacks().get("/api/personnel_meta")
    .header("Accepts", "application/json")
    .send( function(resp) { var meta = JSON.parse(resp.response)
                            vm.depts =  meta.depts
                            vm.titles = meta.titles
                            console.log(vm.depts) } )

console.log(filename)
    
</script>