grid with scroll

.babelrc

@@ -20,6 +20,9 @@
         [
             "@babel/plugin-proposal-object-rest-spread"
         ],
+        [
+            "@babel/plugin-transform-spread"
+        ],
         [
             "@babel/plugin-transform-runtime",
             {

client/App.vue

 <template>
-  
   <transition name="fade" mode="out-in">
     <keep-alive>
       <router-view></router-view>
     </keep-alive>
   </transition>
-
 </template>
 
 <script>
@@ -54,9 +52,7 @@ export default {
   font-size: 0.5rem;
 }
 
-html {
-  overflow-y: auto !important;
-}
+@import url(views/css/globalcss.css);
 </style>
 <style scoped>
 .fade-enter-active,

client/plugins/i18n.js

@@ -59,9 +59,13 @@ const messages = {
             CheckPassError: 'incorrect old password',
             SuccessChangePass: 'Password Successfully changed',
             internalServerError: 'internal server error'
+        },
+        WorkList: {
+            deviceComboboxLabel: 'please select a device',
+            deviceComboboxNoDataMatch: 'No results matching',
+            seachBtn: 'search'
         }
 
-
     },
     'fa': {
         Login: {
@@ -119,6 +123,11 @@ const messages = {
             CheckPassError: 'رمز فعلی نادرست می باشد',
             SuccessChangePass: 'رمز کاربر با موفقیت تغییر یافت',
             internalServerError: 'خطا در سرور'
+        },
+        WorkList: {
+            deviceComboboxLabel: 'لطفا یک دستگاه را انتخاب نمایید',
+            deviceComboboxNoDataMatch: 'هیچ نتیجه ای برابر با',
+            seachBtn: 'جستجو'
         }
 
     }

client/plugins/routes.js

@@ -5,7 +5,7 @@ import ChangePassword from '../views/ChangePassword.vue';
 import Main from '../views/Main.vue';
 
 import EditWorkList from '../components/EditWorkList.vue';
-import WorkList from '../components/WorkList.vue';
+import WorkList from '../components/Worklist.vue';
 
 const routes = [{
         path: '/',

client/views/Login.vue

@@ -23,7 +23,6 @@
                     <v-row>
                       <v-col cols="12">
                         <v-text-field
-                          :autofocus="usernameFocus"
                           :label="$t('Login.username')"
                           prepend-icon="mdi-account-circle"
                           :rules="[rules.required]"
@@ -35,7 +34,6 @@
                       </v-col>
                       <v-col cols="12">
                         <v-text-field
-                          :autofocus="passwordFocus"
                           :type="!showPassword?'password' :'text'"
                           :label="$t('Login.password')"
                           prepend-icon="mdi-lock"
@@ -166,7 +164,7 @@ export default {
             that.snackbar = true;
           }
         } else {
-          Meteor.call("Fetchworklist", "ratio");
+          
           Meteor.setTimeout(() => {
             that.loading = false;
             that.$router.push("/main/worklist");

client/views/Main.vue

 <template>
   <v-app id="inspire">
-    <!-- <div style="height:100%"> -->
-    <!-- <v-content class="fill-height"> -->
-
     <template v-if="!$vuetify.rtl">
       <!-- <v-navigation-drawer v-model="drawerRight" app right clipped :width="$vuetify.breakpoint.width/3" bottom>
         <v-list dense>
@@ -17,18 +14,18 @@
         </v-list>
       </v-navigation-drawer>-->
 
-      <keep-alive>
+      <!-- <keep-alive>
         <router-view name="edit_worklist"></router-view>
-      </keep-alive>
+      </keep-alive>-->
 
       <v-app-bar app clipped-right color="teal lighten-3" dark>
-        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
+        <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
         <v-spacer></v-spacer>
-        <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
-        <v-toolbar-title>Toolbar</v-toolbar-title>
+        <!-- <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon> -->
       </v-app-bar>
 
-      <v-navigation-drawer v-model="drawer" app>
+      <!-- <v-navigation-drawer v-model="drawer" app>
         <v-list dense>
           <v-list-item @click.stop="left = !left">
             <v-list-item-action>
@@ -39,10 +36,10 @@
             </v-list-item-content>
           </v-list-item>
         </v-list>left
-      </v-navigation-drawer>
+      </v-navigation-drawer>-->
     </template>
 
-    <template v-if="$vuetify.rtl">
+    <!-- <template v-if="$vuetify.rtl">
       <v-navigation-drawer v-model="drawer" app clipped>
         <v-list dense>
           <v-list-item @click.stop="left = !left">
@@ -75,47 +72,18 @@
           </v-list-item>
         </v-list>right
       </v-navigation-drawer>
-    </template>
+    </template>-->
 
     <v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
     
-    <v-content class="fill-height">
-      <v-container class="fill-height align-start" fluid>
-        <!-- <v-row justify="center" align="center">
-          <v-col class="shrink">
-            <v-tooltip right>
-              <template v-slot:activator="{ on }">
-                <v-btn :href="source" icon large target="_blank" v-on="on">
-                  <v-icon large>mdi-code-tags</v-icon>
-                </v-btn>
-              </template>
-              <span>Source</span>
-            </v-tooltip>
-            <v-tooltip right>
-              <template v-slot:activator="{ on }">
-                <v-btn
-                  icon
-                  large
-                  href="https://codepen.io/johnjleider/pen/QewYYx"
-                  target="_blank"
-                  v-on="on"
-                >
-                  <v-icon large>mdi-codepen</v-icon>
-                </v-btn>
-              </template>
-              <span>Codepen</span>
-            </v-tooltip>
-          </v-col>
-        </v-row>-->
+      <v-content>
         <router-view></router-view>
-      </v-container>
       </v-content>
     
+
     <v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>
 
     <app-footer></app-footer>
-    <!-- </div> -->
-    <!-- </v-content> -->
   </v-app>
 </template>
 

client/views/css/globalcss.css

+html {
+    overflow-y: hidden !important;
+}
+
+body {
+    overflow: hidden !important;
+}
+
+.application {
+    height: 100%;
+}
+
+main {
+    height: calc(100% - 56px - 36px);
+}
+
+.container {
+    height: 100%;
+    overflow: auto;
+}
\ No newline at end of file

imports/api/collections/devicecode.js

+import { Mongo } from 'meteor/mongo';
+import { Meteor } from 'meteor/meteor';
+
+let DeviceCode;
+if (Meteor.isClient || Meteor.isCordova) {
+    DeviceCode = new Mongo.Collection('devicecode')
+}
+
+if (Meteor.isServer) {
+    DeviceCode = new Mongo.Collection('devicecode', { connection: null })
+}
+
+export default DeviceCode;
\ No newline at end of file

imports/api/methods/devicecode.js

+import { Meteor } from 'meteor/meteor';
+import { check } from 'meteor/check';
+
+
+import DeviceCode from '../collections/devicecode.js';
+
+
+Meteor.methods({
+    'getDeviceCodes' () {
+        debugger;
+        this.unblock();
+        if (this.userId) {
+            try {
+                const result = HTTP.call('GET', `http://192.168.0.156/Broker/HISIntegration.svc/rest/getdevicecodes`);
+                let deviceCodeHttpResult = JSON.parse(result.content);
+                DeviceCode.remove({});
+                deviceCodeHttpResult.Devices.forEach((device) => {
+                    DeviceCode.insert({
+                        ...device
+                    });
+                });
+                return true
+            } catch (e) {
+                // Got a network error, timeout, or HTTP error in the 400 or 500 range.
+                return false;
+            }
+        }
+    }
+});
\ No newline at end of file

imports/api/methods/worklist.js

@@ -12,12 +12,12 @@ import Worklist from '../collections/worklist.js';
 
 Meteor.methods({
     'Fetchworklist' (devicemap) {
-        debugger;
+
         check(devicemap, String);
         this.unblock();
         if (this.userId) {
             try {
-                debugger;
+
                 const result = HTTP.call('GET', `http://192.168.0.156/Broker/HISIntegration.svc/rest/Fetchworklist/${devicemap}`);
                 let worklistHttp = JSON.parse(result.content);
 

imports/api/server/publications/devicecode.js

+import DeviceCode from '../../collections/devicecode.js';
+import { check } from 'meteor/check';
+
+Meteor.publish("devicecode", function() {
+    if (!this.userId) {
+        return this.ready();
+    }
+    return DeviceCode.find({});
+});
\ No newline at end of file

package.json

@@ -13,6 +13,7 @@
         "@babel/runtime": "^7.5.5",
         "bcrypt": "^3.0.6",
         "connect-route": "^0.1.5",
+        "fibers": "^4.0.1",
         "meteor-node-stubs": "^1.0.0",
         "valid-url": "^1.0.9",
         "vue": "^2.6.10",
@@ -31,6 +32,7 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
         "@babel/plugin-transform-arrow-functions": "^7.2.0",
         "@babel/plugin-transform-async-to-generator": "^7.5.0",
+        "@babel/plugin-transform-spread": "^7.6.2",
         "@babel/preset-env": "^7.5.5",
         "@babel/register": "^7.5.5",
         "@mdi/font": "^3.9.97",
@@ -41,6 +43,8 @@
         "file-loader": "^4.2.0",
         "html-loader": "^0.5.5",
         "html-webpack-plugin": "^3.2.0",
+        "less": "^3.10.3",
+        "less-loader": "^5.0.0",
         "material-design-icons-iconfont": "^5.0.1",
         "sass": "^1.22.9",
         "sass-loader": "^7.2.0",

server/main.js

@@ -2,7 +2,9 @@ import { Meteor } from 'meteor/meteor';
 
 import '../imports/api/methods/worklist.js';
 import '../imports/api/methods/changePassword.js';
-import '../imports/api/server/publications/worklist.js'
+import '../imports/api/methods/devicecode.js';
+import '../imports/api/server/publications/worklist.js';
+import '../imports/api/server/publications/devicecode.js';
 
 
 Meteor.startup(() => {

webpack.config.js

@@ -41,8 +41,7 @@ const clientConfig = {
         },
     },
     module: {
-    rules: [
-      {
+        rules: [{
                 test: /\.js$/,
                 loader: 'babel-loader',
                 exclude: /node_modules/
@@ -71,16 +70,22 @@ const clientConfig = {
                 ]
             },
             {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                test: /\.less$/,
                 use: [
+                    'vue-style-loader',
+                    'css-loader',
+                    'less-loader'
+                ]
+            },
             {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [{
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
                         outputPath: 'fonts/'
                     }
-          }
-        ]
+                }]
             },
             {
                 test: /\.css$/,
@@ -111,7 +116,7 @@ const clientConfig = {
                     {
                         loader: "html-loader",
                         options: {
-              attrs: ["img:src"]// the src attribute in img element of html is the target
+                            attrs: ["img:src"] // the src attribute in img element of html is the target
                         }
                     }
                 ]
@@ -131,7 +136,7 @@ const clientConfig = {
         noInfo: true,
         overlay: true,
         hot: true,
-    open:true
+        open: true
     },
     performance: {
         hints: false
@@ -152,18 +157,16 @@ const serverConfig = {
     externals: [meteorExternals()],
     devServer: {
         hot: true,
-    open:true
+        open: true
     },
     devtool: 'source-map',
     mode: "development",
     module: {
-    rules: [
-      {
+        rules: [{
             test: /\.js$/,
             loader: 'babel-loader',
             exclude: /node_modules/
-      }
-    ]
+        }]
     }
 };