feat(users list): create users list for create delete edit

client/components/Users.vue

+<template>
+  <v-container>
+    <v-snackbar color="primary" v-model="snackbar" top>
+      Are You Sure?
+      <v-btn color="pink" @click="deleteUser">yes</v-btn>
+      <v-btn color="pink" @click="snackbar = false">no</v-btn>
+    </v-snackbar>
+    <v-snackbar color="primary" v-model="alertSnackbar" :timeout="2000">{{alertText}}</v-snackbar>
+    <v-dialog v-model="dialog" max-width="600px">
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{newOrEdit=="new"?"New":"Edit"}} User</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <div>
+              <v-progress-linear :active="loading" :indeterminate="loading" color="cyan lighten-2"></v-progress-linear>
+            </div>
+            <v-row dense>
+              <v-col cols="12" md="6">
+                <v-text-field label="Username" v-model="UserForm.username"></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field type="password" label="Password" v-model="UserForm.password"></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="createOrEditUser"
+          >{{newOrEdit=="new"?"Create":"Edit"}}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-row justify="center" dense class="flex-wrap mb-6">
+      <v-col md="7" lg="6" cols="12">
+        <v-card tile>
+          <v-card-actions>
+            <v-row style="margin:auto">
+              <v-col cols="12" class="d-flex justify-center align-center flex-wrap">
+                <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="openNewDialog">
+                  <strong>{{$t("HISLink.newBtn")}}</strong>
+                </v-btn>
+                <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="openEditDialog">
+                  <strong>{{$t("HISLink.editBtn")}}</strong>
+                </v-btn>
+                <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="deleteSnackbar">
+                  <strong>{{$t("HISLink.deleteBtn")}}</strong>
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row justify="center" dense class="flex-wrap mt-6">
+      <v-col md="9" cols="12">
+        <v-data-table
+          v-model="selectedItemInTable"
+          :headers="headerOfTable"
+          :items="itemsOfTable"
+          item-key="_id"
+          class="elevation-1"
+          style="width:100%"
+          fixed-header
+          hide-default-footer
+          disable-pagination
+          show-select
+          single-select
+          :sort-by.sync="sortByTable"
+          :sort-desc.sync="sortDescTable"
+          height="73vh"
+          @click:row="clickRow"
+        ></v-data-table>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import { Meteor } from "meteor/meteor";
+export default {
+  data() {
+    return {
+      sortByTable: undefined,
+      sortDescTable: undefined,
+      selectedItemInTable: [],
+      dialog: false,
+      newOrEdit: "",
+      UserForm: {
+        username: "",
+        password:"",
+        _id: ""
+      },
+      snackbar: false,
+      alertSnackbar: false,
+      alertText: "",
+      loading: false
+    };
+  },
+  computed: {
+    headerOfTable() {
+      let headers = ["username"];
+      let headerObjs = [];
+      for (let header of headers) {
+        headerObjs.push({
+          text: header,
+          value: header,
+          class: "text-center",
+          width: 180
+        });
+      }
+      return headerObjs;
+    },
+    itemsOfTable() {
+      this.loading = false;
+      this.dialog = false;
+      if (this.users && this.users.length > 0) {
+        return this.users;
+      }
+      return [];
+    }
+  },
+  methods: {
+    clickRow(item) {
+      if (
+        this.selectedItemInTable.length > 0 &&
+        this.selectedItemInTable[0]._id == item._id
+      ) {
+        this.selectedItemInTable = [];
+      } else {
+        this.selectedItemInTable = [];
+        this.selectedItemInTable = [item];
+      }
+    },
+    openNewDialog() {
+      for (let prop in this.UserForm) {
+        this.$set(this.UserForm, prop, "");
+      }
+      this.$set(this.UserForm, "_id", "");
+      this.newOrEdit = "new";
+      this.dialog = true;
+    },
+    openEditDialog() {
+      if (this.selectedItemInTable.length == 0) {
+        this.alertSnackbarMethod("please select one of users");
+        return;
+      }
+      for (let prop in this.UserForm) {
+        if (this.selectedItemInTable[0][prop] != undefined) {
+          this.$set(this.UserForm, prop, this.selectedItemInTable[0][prop]);
+        }
+      }
+      this.$set(this.UserForm, "_id", this.selectedItemInTable[0]["_id"]);
+      this.newOrEdit = "edit";
+      this.dialog = true;
+    },
+    createOrEditUser() {
+      this.loading = true;
+      let me = this;
+      if (this.newOrEdit == "new") {
+        Meteor.call("createUser1", this.UserForm, function() {
+          // me.dialog = false;
+        });
+      }
+      if (this.newOrEdit == "edit") {
+        Meteor.call("editUser1", this.UserForm, function() {
+          // me.dialog = false;
+          me.selectedItemInTable = [];
+        });
+      }
+    },
+    deleteUser() {
+        debugger
+      let me = this;
+      this.snackbar = false;
+      if (this.selectedItemInTable.length == 0) {
+        me.alertSnackbarMethod("please select one of users");
+        return;
+      }
+      let deleteUser = {};
+      deleteUser._id = this.selectedItemInTable[0]["_id"];
+
+      Meteor.call("deleteUser1", deleteUser, function() {
+        me.alertSnackbarMethod("User has been deleted");
+      });
+    },
+    deleteSnackbar() {
+      this.snackbar = true;
+    },
+    alertSnackbarMethod(text) {
+      this.alertText = text;
+      this.alertSnackbar = true;
+    },
+    // beforeRouteEnter(to, from, next) {
+    //   next(vm => {
+    //     if (
+    //       Meteor.userId() &&
+    //       Meteor.users.findOne({ _id: Meteor.userId() }).username !=
+    //         "marcoadmin"
+    //     ) {
+    //       vm.$router.push("/main/worklist");
+    //     } else {
+    //       vm.$router.push("/signin");
+    //     }
+    //   });
+    // }
+  },
+  meteor: {
+    $subscribe: {
+      users: []
+    },
+    users() {
+      return Meteor.users.find({username: { $ne: "marcoadmin" } }).fetch();
+    }
+  }
+};
+</script>
+<style>
+</style>
\ No newline at end of file

client/plugins/routes.js

@@ -104,6 +104,8 @@ import HisLink from '../components/HisLink.vue';
 import DeviceMap from '../components/DeviceMap.vue';
 import Client from '../components/Client.vue';
 
+import Users from '../components/Users.vue';
+
 import AppVersion from '../views/AppVersion.vue';
 
 const routes = [{
@@ -138,8 +140,8 @@ const routes = [{
             path: "worklist",
             name: "worklist",
             components: {
-                default: WorkList,
-                edit_worklist: EditWorkList
+
+                edit_worklist: WorkList
             }
         }, {
             path: "hislink",
@@ -153,6 +155,10 @@ const routes = [{
             path: "client",
             name: "client",
             component: Client
+        }, {
+            path: "users",
+            name: "users",
+            component: Users
         }]
     }
 ];

client/views/Home.vue

@@ -7,13 +7,11 @@ import { Meteor } from "meteor/meteor";
 export default {
   beforeRouteEnter(to, from, next) {
     next(vm => {
-      
       if (Meteor.userId()) {
         vm.$router.push("/main/worklist");
       } else {
         vm.$router.push("/signin");
       }
-      
     });
   }
 };

client/views/Main.vue

@@ -41,7 +41,7 @@
       <v-navigation-drawer v-model="drawer" app clipped>
         <v-list nav dense>
           <v-list-item-group v-model="item" color="primary">
-            <v-list-item v-for="(item, i) in items" :key="i" :to="item.url">
+            <v-list-item v-for="(item, i) in updatedItems" :key="i" :to="item.url">
               <!-- <v-list-item-icon>
                 <v-icon v-text="item.icon"></v-icon>
               </v-list-item-icon>-->
@@ -94,9 +94,12 @@
 
     <v-content>
       <transition name="fade" mode="out-in">
-        
-          <router-view></router-view>
-        
+        <router-view></router-view>
+      </transition>
+      <transition name="fade" mode="out-in">
+        <keep-alive>
+          <router-view name="edit_worklist"></router-view>
+        </keep-alive>
       </transition>
     </v-content>
 
@@ -109,6 +112,7 @@
 <script>
 import { Fragment } from "vue-fragment";
 import AppFooter from "../components/AppFooter.vue";
+import { Meteor } from "meteor/meteor";
 export default {
   components: {
     "app-footer": AppFooter,
@@ -117,6 +121,21 @@ export default {
   props: {
     source: String
   },
+  computed: {
+    updatedItems() {
+      debugger;
+      if (
+        Meteor.userId() &&
+        this.users.length > 0 &&
+        Meteor.users.findOne({ _id: Meteor.userId() }).username == "marcoadmin"
+      ) {
+        if (this.items.findIndex(item => item.text == "Users") < 0)
+          this.items.push({ text: "Users", url: "/main/users" });
+      }
+      return this.items;
+    }
+  },
+
   data: () => ({
     drawer: null,
     drawerRight: null,
@@ -129,7 +148,15 @@ export default {
       { text: "DeviceMap", url: "/main/devicemap", icon: "mdi-star" },
       { text: "Client", url: "/main/client" }
     ]
-  })
+  }),
+  meteor: {
+    $subscribe: {
+      users: []
+    },
+    users() {
+      return Meteor.users.find({});
+    }
+  }
 };
 </script>
 

imports/api/methods/users.js

+import { Meteor } from 'meteor/meteor';
+import { check } from 'meteor/check';
+import { HTTP } from 'meteor/http';
+import { Accounts } from "meteor/accounts-base";
+
+
+
+Meteor.methods({
+    'createUser1' (item) {
+        this.unblock();
+        if (this.userId) {
+            try {
+                debugger;
+                let userExists = Meteor.users.findOne({ username: item.username });
+                if (userExists == undefined || userExists == null)
+                    Accounts.createUser({
+                        username: item.username,
+                        password: item.password
+                    });
+
+                return true
+            } catch (e) {
+                // Got a network error, timeout, or HTTP error in the 400 or 500 range.
+                console.log(e);
+                return false;
+            }
+        }
+    },
+    "editUser1" (item) {
+        this.unblock();
+        if (this.userId) {
+            try {
+                debugger;
+                Accounts.setPassword(item._id, item.password, { logout: true })
+                return true
+            } catch (e) {
+                // Got a network error, timeout, or HTTP error in the 400 or 500 range.
+                console.log(e);
+                return false;
+            }
+        }
+    },
+    "deleteUser1" (item) {
+        debugger
+        this.unblock();
+        if (this.userId) {
+            try {
+                debugger;
+                Meteor.users.remove({ _id: item._id });
+                return true
+            } catch (e) {
+                // Got a network error, timeout, or HTTP error in the 400 or 500 range.
+                console.log(e);
+                return false;
+            }
+        }
+    },
+});
\ No newline at end of file

imports/api/server/publications/brands.js

@@ -5,5 +5,10 @@ Meteor.publish("brands", function() {
     if (!this.userId) {
         return this.ready();
     }
-    return Brands.find({});
+    return Brands.find({}, {
+        reactive: true,
+        disableOplog: false,
+        pollingThrottleMs: 1000,
+        pollingIntervalMs: 1000
+    });
 });
\ No newline at end of file

imports/api/server/publications/clients.js

@@ -2,8 +2,22 @@ import Clients from '../../collections/clients.js';
 import { check } from 'meteor/check';
 
 Meteor.publish("clients", function() {
-    if (!this.userId) {
-        return this.ready();
+    debugger;
+    // if (!this.userId) {
+    //     return this.ready();
+    // }
+    // return Clients.find({});
+
+    if (this.userId) {
+        return Clients.find({}, {
+
+            reactive: true,
+            disableOplog: false,
+            pollingThrottleMs: 1000,
+            pollingIntervalMs: 1000
+        })
+    } else {
+        return [];
     }
-    return Clients.find({});
+
 });
\ No newline at end of file

imports/api/server/publications/devicecode.js

@@ -5,5 +5,10 @@ Meteor.publish("devicecode", function() {
     if (!this.userId) {
         return this.ready();
     }
-    return DeviceCode.find({});
+    return DeviceCode.find({}, {
+        reactive: true,
+        disableOplog: false,
+        pollingThrottleMs: 1000,
+        pollingIntervalMs: 1000
+    });
 });
\ No newline at end of file

imports/api/server/publications/devicemap.js

@@ -2,10 +2,14 @@ import DeviceMap from '../../collections/devicemap';
 import { check } from 'meteor/check';
 
 Meteor.publish("devicemaps", function() {
-    this.autorun(function(computation) {
-        if (!this.userId) {
-            return this.ready();
-        }
-        return DeviceMap.find({});
+    debugger;
+    if (!this.userId) {
+        return this.ready();
+    }
+    return DeviceMap.find({}, {
+        reactive: true,
+        disableOplog: false,
+        pollingThrottleMs: 1000,
+        pollingIntervalMs: 1000
     });
 });
\ No newline at end of file

imports/api/server/publications/hislink.js

@@ -5,5 +5,10 @@ Meteor.publish("hislink", function() {
     if (!this.userId) {
         return this.ready();
     }
-    return HisLink.find({});
+    return HisLink.find({}, {
+        reactive: true,
+        disableOplog: false,
+        pollingThrottleMs: 1000,
+        pollingIntervalMs: 1000
+    });
 });
\ No newline at end of file

imports/api/server/publications/users.js

+import { check } from 'meteor/check';
+
+Meteor.publish("users", function() {
+    // if (!this.userId) {
+    //     return this.ready();
+    // }
+    // return Clients.find({});
+
+    if (this.userId) {
+        let isMarcoAdmin = Meteor.users.findOne({ _id: this.userId });
+        if (isMarcoAdmin.username == "marcoadmin") {
+
+            return Meteor.users.find({ username: { $ne: "marcoadmin" } });
+        }
+
+        // return Meteor.users.find({});
+        else
+            return [];
+        // return Clients.find({}, {
+
+        //     reactive: true,
+        //     disableOplog: false,
+        //     pollingThrottleMs: 1000,
+        //     pollingIntervalMs: 1000
+        // })
+
+
+    } else {
+        return [];
+    }
+
+});
\ No newline at end of file

server/main.js

@@ -7,6 +7,7 @@ import '../imports/api/methods/brands.js';
 import '../imports/api/methods/hisLink.js';
 import '../imports/api/methods/clients.js';
 import '../imports/api/methods/devicemap.js';
+import '../imports/api/methods/users.js'
 
 import '../imports/api/server/publications/worklist.js';
 import '../imports/api/server/publications/devicecode.js';
@@ -14,8 +15,15 @@ import '../imports/api/server/publications/hislink.js';
 import '../imports/api/server/publications/brands.js';
 import '../imports/api/server/publications/clients.js';
 import '../imports/api/server/publications/devicemap.js';
+import '../imports/api/server/publications/users.js';
 
+import { Accounts } from "meteor/accounts-base";
 
 Meteor.startup(() => {
-    // code to run on server at startup
+    let marcoUser = Meteor.users.findOne({ username: "marcoadmin" });
+    if (marcoUser == undefined || marcoUser == null)
+        Accounts.createUser({
+            username: 'marcoadmin',
+            password: 'SysAdmin4.21'
+        });
 });
\ No newline at end of file