create DockerFile and docker-compose.yml WAD-6915

.babelrc

@@ -11,6 +11,7 @@
         ]
     ],
     "plugins": [
+       
         [
             "@babel/plugin-transform-async-to-generator"
         ],

.dockerignore

+node_modules/
+.meteor/local/
+.vscode/

.meteor/packages

@@ -11,8 +11,8 @@ reactive-var@1.0.11            # Reactive variable for tracker
 tracker@1.2.0                 # Meteor's client-side reactive programming library
 
 shell-server@0.4.0            # Server-side component of the `meteor shell` command
-
+http
 accounts-password
 ardatan:webpack
 ardatan:webpack-dev-middleware
-http
+

client/components/Worklist.vue

@@ -57,11 +57,9 @@
           v-model="selectedPatientInTable"
           :headers="headerOfTable"
           :items="patientsOfTable"
-          single-select
           item-key="_id"
           class="elevation-1"
           style="width:100%"
-          show-select
           fixed-header
           hide-default-footer
           disable-pagination
@@ -80,11 +78,7 @@
             <v-toolbar flat color="white">
               <!-- <v-toolbar-title>{{devicemap==""?$t("WorkList.noDevicemap"):devicemap}}</v-toolbar-title> -->
 
-              <v-btn
-                color="rgb(94, 181, 177,.85)"
-                class="white--text"
-                @click="editPatients()"
-              >
+              <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="editPatients()">
                 <v-icon small left>edit</v-icon>
                 <strong>{{$t('WorkList.editBtn')}}</strong>
               </v-btn>
@@ -399,6 +393,117 @@
           <!-- <template v-slot:item.Action="{ item }">
             <v-icon small @click="editPatients(item)">edit</v-icon>
           </template>-->
+
+          <template v-slot:item="{item}">
+            <tr
+              v-if="$vuetify.breakpoint.mdAndUp"
+              @click="activerow(item)"
+              :class="{'cyan lighten-4': item._id===selectedId}"
+            >
+              <td>{{ item.AdmissionID }}</td>
+              <td class="text-xs-right">
+                <v-btn
+                  text
+                  tile
+                  @click="activerow(item);editPatients()"
+                  :class="{
+                        'red--text': item.EnglishFirstName.includes('?'),
+                        'blue--text':!item.EnglishFirstName.includes('?')
+                        }"
+                >{{item.EnglishFirstName}}</v-btn>
+              </td>
+              <td class="text-xs-right">
+                <v-btn
+                  text
+                  tile
+                  @click="activerow(item);editPatients()"
+                  :class="{
+                        'red--text': item.EnglishLastName.includes('?'),
+                        'blue--text':!item.EnglishLastName.includes('?')
+                        }"
+                >{{item.EnglishLastName}}</v-btn>
+              </td>
+              <td class="text-xs-right">{{ item.FarsiFirstName }}</td>
+              <td class="text-xs-right">{{ item.FarsiLastName }}</td>
+              <td class="text-xs-right">{{ item.HISID }}</td>
+              <td class="text-xs-right">{{ item.Modality }}</td>
+              <td class="text-xs-right">{{ item.PatientAge }}</td>
+            </tr>
+            <tr v-else @click="activerow(item)" :class="{'cyan lighten-4': item._id===selectedId}">
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">AdmissionID</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.AdmissionID}}</div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper flex-wrap">
+                  <div class="v-data-table__mobile-row__header">EnglishFirstName</div>
+                  <div class="v-data-table__mobile-row__cell">
+                    <v-btn
+                      
+                      :class="{
+                        'red--text': item.EnglishFirstName.includes('?'),
+                        'blue--text':!item.EnglishFirstName.includes('?'),
+                        'ma-0':true
+                        }"
+                      text
+                      tile
+                      @click="activerow(item);editPatients()"
+                    >{{item.EnglishFirstName}}</v-btn>
+                  </div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper flex-wrap">
+                  <div class="v-data-table__mobile-row__header">EnglishLastName</div>
+                  <div class="v-data-table__mobile-row__cell">
+                    <v-btn
+                      
+                      :class="{
+                        'red--text': item.EnglishLastName.includes('?'),
+                        'blue--text':!item.EnglishLastName.includes('?'),
+                        'ma-0':true
+                        }"
+                      text
+                      tile
+                      @click="activerow(item);editPatients()"
+                    >{{item.EnglishLastName}}</v-btn>
+                  </div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">FarsiFirstName</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.FarsiFirstName}}</div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">FarsiLastName</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.FarsiLastName}}</div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">HISID</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.HISID}}</div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">Modality</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.Modality}}</div>
+                </div>
+              </td>
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__wrapper">
+                  <div class="v-data-table__mobile-row__header">PatientAge</div>
+                  <div class="v-data-table__mobile-row__cell">{{item.PatientAge}}</div>
+                </div>
+              </td>
+            </tr>
+          </template>
         </v-data-table>
       </v-col>
     </v-row>
@@ -411,6 +516,36 @@ import DeviceCode from "../../imports/api/collections/devicecode.js";
 import { Tracker } from "meteor/tracker";
 export default {
   methods: {
+    activerow: function(item) {
+      if (this.sortByTable && this.sortByTable.length > 0) {
+        const items = this.patientsOfTable.sort((a, b) => {
+          const sortA = a[this.sortByTable[0]];
+          const sortB = b[this.sortByTable[0]];
+
+          if (this.sortDescTable && this.sortDescTable[0] == true) {
+            if (sortA < sortB) return 1;
+            if (sortA > sortB) return -1;
+            return 0;
+          } else {
+            if (sortA < sortB) return -1;
+            if (sortA > sortB) return 1;
+            return 0;
+          }
+        });
+        console.log(items);
+        this.sortedItems = items;
+      } else {
+        this.sortedItems = this.patientsOfTable;
+      }
+
+      if (item) {
+        this.selectedItem = item;
+        this.selectedPatientInTable = [item];
+      }
+
+      this.selectedId = item._id;
+      // this.$set(item, "selected", true);
+    },
     searchPatients() {
       if (this.selectedDevice && this.devicemap != this.selectedDevice.Value) {
         let self = this;
@@ -487,6 +622,7 @@ export default {
       }
 
       this.editPatients(this.sortedItems[index + 1]);
+      this.activerow(this.sortedItems[index + 1]);
     },
     prevPatient() {
       let index = this.sortedItems.findIndex(
@@ -507,6 +643,7 @@ export default {
       }
 
       this.editPatients(this.sortedItems[index - 1]);
+      this.activerow(this.sortedItems[index - 1]);
     },
     savePatient() {
       debugger;
@@ -541,9 +678,12 @@ export default {
       ].filter(elm => {
         return elm && elm.length > 0;
       });
+
+      let { selected, ...selectedItemClone } = this.selectedItem;
+
       this.editLoading = true;
       let self = this;
-      Meteor.call("EditworklistItem", this.selectedItem, function(
+      Meteor.call("EditworklistItem", selectedItemClone, function(
         error,
         result
       ) {
@@ -557,7 +697,7 @@ export default {
     devicemap: "",
     selectedDevice: undefined,
     deviceComboSearch: null,
-
+    selectedId: -1,
     noDataCombo: true,
     toggleAllOrUnknown: 0,
     selectedPatientInTable: undefined,
@@ -658,9 +798,6 @@ export default {
     }
   },
   watch: {
-    worklist: (newWorklist, oldWorklist) => {
-      console.log(newWorklist);
-    },
     "$subReady.worklist"(ready) {},
     selectedDevice(newDevice, oldDevice) {
       if (this.selectedDevice && this.selectedDevice.Value) {
@@ -674,33 +811,33 @@ export default {
       // } else {
       //   alert("لطفا یکی از دستگاه ها را انتخاب نمایید");
       // }
-    },
-    selectedPatientInTable(newSelected, oldSelected) {
-      if (this.sortByTable && this.sortByTable.length > 0) {
-        const items = this.patientsOfTable.sort((a, b) => {
-          const sortA = a[this.sortByTable[0]];
-          const sortB = b[this.sortByTable[0]];
-
-          if (this.sortDescTable && this.sortDescTable[0] == true) {
-            if (sortA < sortB) return 1;
-            if (sortA > sortB) return -1;
-            return 0;
-          } else {
-            if (sortA < sortB) return -1;
-            if (sortA > sortB) return 1;
-            return 0;
-          }
-        });
-        console.log(items);
-        this.sortedItems = items;
-      } else {
-        this.sortedItems = this.patientsOfTable;
     }
+    // selectedPatientInTable(newSelected, oldSelected) {
+    //   if (this.sortByTable && this.sortByTable.length > 0) {
+    //     const items = this.patientsOfTable.sort((a, b) => {
+    //       const sortA = a[this.sortByTable[0]];
+    //       const sortB = b[this.sortByTable[0]];
+
+    //       if (this.sortDescTable && this.sortDescTable[0] == true) {
+    //         if (sortA < sortB) return 1;
+    //         if (sortA > sortB) return -1;
+    //         return 0;
+    //       } else {
+    //         if (sortA < sortB) return -1;
+    //         if (sortA > sortB) return 1;
+    //         return 0;
+    //       }
+    //     });
+    //     console.log(items);
+    //     this.sortedItems = items;
+    //   } else {
+    //     this.sortedItems = this.patientsOfTable;
+    //   }
 
-      if (newSelected) {
-        this.selectedItem = newSelected[0];
-      }
-    }
+    //   if (newSelected) {
+    //     this.selectedItem = newSelected[0];
+    //   }
+    // }
   }
 };
 </script>
@@ -710,10 +847,6 @@ export default {
 .wholeLayout {
   height: calc(~"75vh - 106px");
 }
-td,
-th {
-  width: 50px !important;
-}
 </style>
 
 <style scoped>

client/plugins/routes.js

-import Login from '../views/Login.vue';
-import Home from '../views/Home.vue';
-import Register from '../views/Register.vue';
-import ChangePassword from '../views/ChangePassword.vue';
-import Main from '../views/Main.vue';
+// const Login = () =>
+//     import ('../views/Login.vue')
 
-import EditWorkList from '../components/EditWorkList.vue';
-import WorkList from '../components/Worklist.vue';
+
+// const Home = () =>
+//     import ('../views/Home.vue')
+
+
+// const Register = () =>
+//     import ('../views/Register.vue')
+
+
+// const ChangePassword = () =>
+//     import ('../views/ChangePassword.vue')
+
+
+// const Main = () =>
+//     import ('../views/Main.vue')
+
+
+// const EditWorkList = () =>
+//     import ('../components/EditWorkList.vue')
+
+// const WorkList = () =>
+//     import ('../components/Worklist.vue')
+
+// import Login from '../views/Login.vue';
+// import Home from '../views/Home.vue';
+// import Register from '../views/Register.vue';
+// import ChangePassword from '../views/ChangePassword.vue';
+// import Main from '../views/Main.vue';
+
+// import EditWorkList from '../components/EditWorkList.vue';
+// import WorkList from '../components/Worklist.vue';
 
 const routes = [{
         path: '/',
-        component: Home,
+        component: () =>
+            import ('../views/Home.vue'),
         name: 'Home'
     },
     {
         path: '/signin',
-        component: Login,
+        component: () =>
+            import ('../views/Login.vue'),
         name: 'signin'
     },
     {
         path: '/signup',
-        component: Register,
+        component: () =>
+            import ('../views/Register.vue'),
         name: 'signup'
     },
     {
         path: '/changePassword',
-        component: ChangePassword,
+        component: () =>
+            import ('../views/ChangePassword.vue'),
         name: 'changePassword'
     }, {
         path: '/main',
-        component: Main,
+        component: () =>
+            import ('../views/Main.vue'),
         name: 'main',
         children: [{
             path: "worklist",
             name: "worklist",
             components: {
-                default: WorkList,
-                edit_worklist: EditWorkList
+                default: () =>
+                    import ('../components/Worklist.vue'),
+                edit_worklist: () =>
+                    import ('../components/EditWorkList.vue')
             }
         }]
     }

docker-compose.yml

+  
+version: '3'
+
+services:
+  app:
+    restart: on-failure
+    build:
+      context: .
+      dockerfile: docker/devel/Dockerfile
+    image: karname/app:1.0
+    ports:
+      - '5050:3000'
+    depends_on:
+      - mongo
+    links: 
+      - mongo
+    environment:
+      ROOT_URL: ${APP_ROOT_URL:-http://localhost}
+      MONGO_URL: mongodb://mongo:27017/karname
+      PORT: 3000
+      METEOR_SETTINGS: '{"worklistUrl":"http://192.168.0.156"}'
+  mongo:
+    image: mongo:latest
+    command:
+      - --storageEngine=wiredTiger
+    volumes:
+      - data:/data/db
+
+volumes:
+  data:
\ No newline at end of file

docker/devel/Dockerfile

+# The tag here should match the Meteor version of your app, per .meteor/release
+FROM geoffreybooth/meteor-base:1.8.1
+
+WORKDIR $APP_SOURCE_FOLDER/
+
+# Copy app package.json and package-lock.json into container
+COPY ./package*.json $APP_SOURCE_FOLDER/
+
+RUN bash $SCRIPTS_FOLDER/build-app-npm-dependencies.sh
+
+# Copy app source into container
+COPY . $APP_SOURCE_FOLDER/
+
+# COPY ./docker/build-meteor-bundle.sh $SCRIPTS_FOLDER/
+
+RUN bash $SCRIPTS_FOLDER/build-meteor-bundle.sh
+
+# Rather than Node 8 latest (Alpine), you can also use the specific version of Node expected by your Meteor release, per https://docs.meteor.com/changelog.html
+FROM node:12-alpine
+
+ENV APP_BUNDLE_FOLDER /opt/bundle
+ENV SCRIPTS_FOLDER /docker
+
+# Install OS build dependencies, which we remove later after we’ve compiled native Node extensions
+RUN apk --no-cache --virtual .node-gyp-compilation-dependencies add \
+		g++ \
+		make \
+		python \
+	# And runtime dependencies, which we keep
+	&& apk --no-cache add \
+		bash \
+		ca-certificates
+
+# Copy in entrypoint
+COPY --from=0 $SCRIPTS_FOLDER $SCRIPTS_FOLDER/
+
+# Copy in app bundle
+COPY --from=0 $APP_BUNDLE_FOLDER/bundle $APP_BUNDLE_FOLDER/bundle/
+
+RUN bash $SCRIPTS_FOLDER/build-meteor-npm-dependencies.sh --build-from-source \
+	&& apk del .node-gyp-compilation-dependencies
+
+# Start app
+ENTRYPOINT ["/docker/entrypoint.sh"]
+
+CMD ["node", "main.js"]
\ No newline at end of file

docker/prod/Dockerfile

+# The tag here should match the Meteor version of your app, per .meteor/release
+FROM geoffreybooth/meteor-base:1.8.1
+
+WORKDIR $APP_SOURCE_FOLDER/
+
+# Copy app package.json and package-lock.json into container
+COPY ./package*.json $APP_SOURCE_FOLDER/
+
+RUN bash $SCRIPTS_FOLDER/build-app-npm-dependencies.sh
+
+# Copy app source into container
+COPY . $APP_SOURCE_FOLDER/
+
+# COPY ./docker/build-meteor-bundle.sh $SCRIPTS_FOLDER/
+
+RUN bash $SCRIPTS_FOLDER/build-meteor-bundle.sh
+
+# Rather than Node 8 latest (Alpine), you can also use the specific version of Node expected by your Meteor release, per https://docs.meteor.com/changelog.html
+FROM node:12-alpine
+
+ENV APP_BUNDLE_FOLDER /opt/bundle
+ENV SCRIPTS_FOLDER /docker
+
+# Install OS build dependencies, which we remove later after we’ve compiled native Node extensions
+RUN apk --no-cache --virtual .node-gyp-compilation-dependencies add \
+		g++ \
+		make \
+		python \
+	# And runtime dependencies, which we keep
+	&& apk --no-cache add \
+		bash \
+		ca-certificates
+
+# Copy in entrypoint
+COPY --from=0 $SCRIPTS_FOLDER $SCRIPTS_FOLDER/
+
+# Copy in app bundle
+COPY --from=0 $APP_BUNDLE_FOLDER/bundle $APP_BUNDLE_FOLDER/bundle/
+
+RUN bash $SCRIPTS_FOLDER/build-meteor-npm-dependencies.sh --build-from-source \
+	&& apk del .node-gyp-compilation-dependencies
+
+# Start app
+ENTRYPOINT ["/docker/entrypoint.sh"]
+
+CMD ["node", "main.js"]
\ No newline at end of file

imports/api/methods/devicecode.js

@@ -11,7 +11,7 @@ Meteor.methods({
         this.unblock();
         if (this.userId) {
             try {
-                const result = HTTP.call('GET', `http://192.168.0.156/Broker/HISIntegration.svc/rest/getdevicecodes`);
+                const result = HTTP.call('GET', `${Meteor.settings.worklistUrl}/Broker/HISIntegration.svc/rest/getdevicecodes`);
                 let deviceCodeHttpResult = JSON.parse(result.content);
                 DeviceCode.remove({});
                 deviceCodeHttpResult.Devices.forEach((device) => {

imports/api/methods/worklist.js

@@ -20,7 +20,7 @@ Meteor.methods({
         this.unblock();
         if (this.userId) {
             try {
-                const result = HTTP.call('GET', `http://192.168.0.156/Broker/HISIntegration.svc/rest/Fetchworklist/${devicemap}`);
+                const result = HTTP.call('GET', `${Meteor.settings.worklistUrl}/Broker/HISIntegration.svc/rest/Fetchworklist/${devicemap}`);
                 let worklistHttp = JSON.parse(result.content);
                 Worklist.remove({ _userid: this.userId, _devicemap: devicemap });
                 worklistHttp.WorkListItems.forEach((patient) => {
@@ -84,7 +84,7 @@ Meteor.methods({
         //     "StudyInstanceUID": "1.3.12.2.1107.5.2.30.26719.6.8122118808"
         // }
         // try {
-        debugger;
+        if (this.userId) {
             delete item._id;
             workListItemSchema.validate(item);
 
@@ -96,12 +96,14 @@ Meteor.methods({
                 }
             }
 
-        const result = HTTP.call('POST', `http://192.168.0.156/Broker/HISIntegration.svc/rest/EditworklistItem`, options);
+            const result = HTTP.call('POST', `${Meteor.settings.worklistUrl}/Broker/HISIntegration.svc/rest/EditworklistItem`, options);
             // console.log(result);
 
             let update = Worklist.update({ AdmissionID: item.AdmissionID }, { $set: JSON.parse(result.content) });
             console.log(update);
             return true;
+        }
+
         // }
         // catch (e) {
 

package.json

@@ -31,6 +31,7 @@
         "@babel/core": "^7.5.5",
         "@babel/plugin-proposal-class-properties": "^7.5.5",
         "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
         "@babel/plugin-transform-arrow-functions": "^7.2.0",
         "@babel/plugin-transform-async-to-generator": "^7.5.0",
         "@babel/plugin-transform-spread": "^7.6.2",

settings.json

+{
+    "worklistUrl": "http://192.168.0.156"
+}
\ No newline at end of file

webpack.config.js

@@ -44,7 +44,12 @@ const clientConfig = {
         rules: [{
                 test: /\.js$/,
                 loader: 'babel-loader',
-                exclude: /node_modules/
+                exclude: /node_modules/,
+                options: {
+                    plugins: [
+                        "@babel/plugin-syntax-dynamic-import"
+                    ]
+                }
             },
             {
                 test: /\.vue$/,