redesigned method, instrument views

backend/felicity_lims/felicity/api/gql/__init__.py

@@ -1,5 +1,5 @@
 import logging
-from typing import Optional, Tuple
+from typing import Optional, Tuple, Union
 
 import strawberry  # noqa
 

frontend/vite/src/graphql/instrument.mutations.ts

@@ -130,6 +130,14 @@ export const ADD_INSTRUMENT= gql`
         name
         description
         keyword
+        instrumentType {
+          uid
+          name
+        }
+        manufacturer {
+          uid
+          name
+        }
         supplier {
           uid
           name
@@ -154,6 +162,14 @@ export const EDIT_INSTRUMENT= gql`
         name
         description
         keyword
+        instrumentType {
+          uid
+          name
+        }
+        manufacturer {
+          uid
+          name
+        }
         supplier {
           uid
           name

frontend/vite/src/views/admin/instruments/Instruments.vue

@@ -10,86 +10,41 @@
     </div>
     <hr />
 
-    <div class="grid grid-cols-12 gap-4 mt-2">
+    <div class="overflow-x-auto mt-4">
-      <section class="col-span-4 overflow-y-scroll overscroll-contain patient-scrol">
+      <div class="align-middle inline-block min-w-full shadow overflow-hidden bg-white shadow-dashboard px-2 pt-1 rounded-bl-lg rounded-br-lg">
-        <ul>
+      <table class="min-w-full">
-          <li 
+          <thead>
-          v-for="inst in instruments"
+          <tr>
-          :key="inst.uid"
+              <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Name</th>
-          href="#"
+              <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Type</th>
-          @click.prevent.stop="selectInstrument(inst)"
+              <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Manufacturer</th>
-          :class="[
+              <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Supplier</th>
-            'bg-white w-full p-1 mb-1 rounded',
+              <th class="px-1 py-1 border-b-2 border-gray-300"></th>
-            { 'border-gray-100 bg-green-100': inst.uid === instrument.uid },
+          </tr>
-          ]">
+          </thead>
-            <a class="cursor-pointer">
+          <tbody class="bg-white">
-              <div class="flex-grow p-1">
+          <tr v-for="inst in instruments" :key="inst?.uid">
-                <div class="font-medium text-gray-500 hover:text-gray-700 flex justify-between">
+              <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-                  <span>{{ inst.name }}</span>
+                <div class="text-sm leading-5 text-gray-800">{{ inst?.name }}</div>
-                  <span class="text-sm text-gray-500"></span>
+              </td>
-                </div>
+              <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-              </div>
+                <div class="text-sm leading-5 text-gray-800">{{ inst?.instrumentType?.name }}</div>
-            </a>
+              </td>
-          </li>
+              <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-        </ul>
+                <div class="text-sm leading-5 text-blue-900">{{ inst?.manufacturer?.name }}</div>
-      </section>
+              </td>
+              <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
+                <div class="text-sm leading-5 text-blue-900">{{ inst?.supplier?.name }}</div>
+              </td>
+              <td class="px-1 py-1 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
+                  <button @click="FormManager(false, inst)" class="px-2 py-1 mr-2 border-orange-500 border text-orange-500 rounded transition duration-300 hover:bg-orange-700 hover:text-white focus:outline-none">Edit</button>
+              </td>
+          </tr>
+          </tbody>
+      </table>
+      </div>
+  </div>
 
-      <section class="col-span-8"  v-if="instrument?.uid !== undefined">
-        <div class="bg-white rounded-lg shadow-sm hover:shadow-lg duration-500 px-4 sm:px-6 md:px-2 py-4" >
-          <div class="grid grid-cols-12 gap-3">
-            <div class="col-span-12 px-3 sm:px-0">
-              <div class="flex justify-between sm:text-sm md:text-md lg:text-lg text-gray-700 font-bold">
-                <span>{{ instrument?.name }}</span>
-                <div>
-                  <button
-                    @click="FormManager(false)"
-                    class="ml-4 inline-flex items-center justify-center w-8 h-8 mr-2 border-blue-500 border text-gray-900 transition-colors duration-150 bg-white rounded-full focus:outline-none hover:bg-gray-200"
-                  >
-                    <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
-                      <path
-                        d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-                      ></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Sample and Case Data -->
-        <nav class="bg-white px-6 pt-2 shadow-md mt-2">
-          <div class="-mb-px flex justify-start">
-            <a
-              v-for="tab in tabs"
-              :key="tab"
-              :class="[
-                'no-underline text-gray-500 uppercase tracking-wide font-bold text-xs py-1 mr-8 tab',
-                { 'tab-active': currentTab === tab },
-              ]"
-              @click="currentTab = tab"
-              href="#"
-            >
-              {{ tab }}
-            </a>
-          </div>
-        </nav>
-
-        <section class="mt-2 p-2 bg-white">
-          <div v-if="currentTab === 'view'">
-            <h3>General</h3>
-            <hr> 
-            <input type="text">
-          </div>
-          <div v-else-if="currentTab === 'configs'">
-            <h3>Analyses</h3>
-            <hr>
-              <input type="text">
-          </div>
-        </section>
-
-      </section>
-    </div>
   </div>
 
   <!-- AnaltsisProfile Form Modal -->
@@ -206,27 +161,33 @@
   const { executeMutation: updateInstrument } = useMutation(EDIT_INSTRUMENT);
 
   function addInstrument(): void {
-    const payload = { name: instrument.name, keyword: instrument.keyword, description: instrument.description }
+    const payload = { 
+      name: instrument.name, 
+      keyword: instrument.keyword, 
+      description: instrument.description,
+      instrumentTypeUid: instrument.instrumentTypeUid,
+      manufacturerUid: instrument.manufacturerUid,
+      supplierUid: instrument.supplierUid,
+    }
     createInstrument({ payload }).then((result) => {
       store.dispatch(ActionTypes.ADD_INSTRUMENT, result);
     });
   }
 
   function editInstrument(): void {
-    const payload = { name: instrument.name, keyword: instrument.keyword, description: instrument.description }
+    const payload = { 
+      name: instrument.name, 
+      keyword: instrument.keyword, 
+      description: instrument.description,
+      instrumentTypeUid: instrument.instrumentTypeUid,
+      manufacturerUid: instrument.manufacturerUid,
+      supplierUid: instrument.supplierUid,
+    }
     updateInstrument({ uid: instrument.uid, payload }).then((result) => {
       store.dispatch(ActionTypes.UPDATE_INSTRUMENT, result);
     });
   }
 
-  function selectInstrument(obj: IInstrument): void {
-    Object.assign(instrument, { ...obj})
-  }
-  
-  function resetInstrument(): void {
-    Object.assign(instrument, { ...({} as IInstrument)})
-  }
-
   function FormManager(create: boolean, obj = {} as IInstrument): void {
     formAction.value = create;
     showModal.value = true;

frontend/vite/src/views/admin/instruments/MethodForm.vue

@@ -72,7 +72,6 @@
   import { useMutation } from '@urql/vue';
   import { ref, reactive, computed, PropType, watch, toRefs } from 'vue';
   import { useStore } from 'vuex';
-  import { ActionTypes as AnalysisActionTypes} from '../../../store/modules/analysis';
   import { ActionTypes } from '../../../store/modules/setup';
   import { IInstrument, IMethod } from '../../../models/setup'
   import { ADD_METHOD, EDIT_METHOD  } from '../../../graphql/instrument.mutations';

frontend/vite/src/views/admin/instruments/Methods.vue

@@ -16,85 +16,35 @@
     </div>
     <hr />
 
-    <div class="grid grid-cols-12 gap-4 mt-2">
+    <div class="overflow-x-auto mt-4">
-      <section class="col-span-4 overflow-y-scroll overscroll-contain patient-scrol">
+      <div class="align-middle inline-block min-w-full shadow overflow-hidden bg-white shadow-dashboard px-2 pt-1 rounded-bl-lg rounded-br-lg">
-        <ul>
+        <table class="min-w-full">
-          <li 
+            <thead>
-          v-for="meth in methods"
+            <tr>
-          :key="meth?.uid"
+                <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Name</th>
-          href="#"
+                <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Instruments</th>
-          @click.prevent.stop="selectMethod(meth)"
+                <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-black-500 tracking-wider">Analyses</th>
-          :class="[
+                <th class="px-1 py-1 border-b-2 border-gray-300"></th>
-            'bg-white w-full p-1 mb-1 rounded',
+            </tr>
-            { 'border-gray-100 bg-green-100': meth?.uid === method?.uid },
+            </thead>
-          ]">
+            <tbody class="bg-white">
-            <a class="cursor-pointer">
+            <tr v-for="meth in methods" :key="meth?.uid">
-              <div class="flex-grow p-1">
+                <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-                <div class="font-medium text-gray-500 hover:text-gray-700 flex justify-between">
+                  <div class="text-sm leading-5 text-gray-800">{{ meth?.name }}</div>
-                  <span>{{ meth?.name }}</span>
+                </td>
-                  <span class="text-sm text-gray-500"></span>
+                <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-                </div>
+                  <div class="text-sm leading-5 text-gray-800">{{ meth?.instruments?.map(inst => inst?.name)?.join(",") }}</div>
-              </div>
+                </td>
-            </a>
+                <td class="px-1 py-1 whitespace-no-wrap border-b border-gray-500">
-          </li>
+                  <div class="text-sm leading-5 text-blue-900">{{ getAnalyses(meth) }}</div>
-        </ul>
+                </td>
-      </section>
+                <td class="px-1 py-1 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
-
+                    <button @click="FormManager(false, meth)" class="px-2 py-1 mr-2 border-orange-500 border text-orange-500 rounded transition duration-300 hover:bg-orange-700 hover:text-white focus:outline-none">Edit</button>
-      <section class="col-span-8"  v-if="method?.uid !== undefined">
+                </td>
-        <div class="bg-white rounded-lg shadow-sm hover:shadow-lg duration-500 px-4 sm:px-6 md:px-2 py-4" >
+            </tr>
-          <div class="grid grid-cols-12 gap-3">
+            </tbody>
-            <div class="col-span-12 px-3 sm:px-0">
+        </table>
-              <div class="flex justify-between sm:text-sm md:text-md lg:text-lg text-gray-700 font-bold">
+      </div>
-                <span>{{ method?.name }}</span>
-                <div>
-                  <button
-                    @click="FormManager(false)"
-                    class="ml-4 inline-flex items-center justify-center w-8 h-8 mr-2 border-blue-500 border text-gray-900 transition-colors duration-150 bg-white rounded-full focus:outline-none hover:bg-gray-200"
-                  >
-                    <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
-                      <path
-                        d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-                      ></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Sample and Case Data -->
-        <nav class="bg-white px-6 pt-2 shadow-md mt-2">
-          <div class="-mb-px flex justify-start">
-            <a
-              v-for="tab in tabs"
-              :key="tab"
-              :class="[
-                'no-underline text-gray-500 uppercase tracking-wide font-bold text-xs py-1 mr-8 tab',
-                { 'tab-active': currentTab === tab },
-              ]"
-              @click="currentTab = tab"
-              href="#"
-            >
-              {{ tab }}
-            </a>
-          </div>
-        </nav>
-
-        <section class="mt-2 p-2 bg-white">
-          <div v-if="currentTab === 'view'">
-            <h3>General</h3>
-            <hr> 
-            <input type="text">
-          </div>
-          <div v-else-if="currentTab === 'configurations'">
-            <h3>Analyses</h3>
-            <hr>
-              <input type="text">
-          </div>
-        </section>
-
-      </section>
     </div>
   </div>
 
@@ -115,19 +65,14 @@
   import modal from '../../../components/SimpleModal.vue';
 
   import MethodForm from './MethodForm.vue';
-  import { useMutation } from '@urql/vue';
   import { ref, reactive, computed } from 'vue';
   import { useStore } from 'vuex';
   import { ActionTypes } from '../../../store/modules/setup';
   import { ActionTypes as AnalysisActionTypes} from '../../../store/modules/analysis';
   import { IMethod } from '../../../models/setup'
-  import { ADD_METHOD, EDIT_METHOD  } from '../../../graphql/instrument.mutations';
 
   let store = useStore();
 
-  // each tab if just gonna be forms with updatable values on button click
-  let currentTab = ref('view');
-  const tabs = ['view', 'configurations'];
   
   let showModal = ref(false);
   let formTitle = ref('');
@@ -138,35 +83,11 @@
 
   const analysesParams = { first: 1000, after: "", text: "", sortBy: ["name"]}
   store.dispatch(AnalysisActionTypes.FETCH_ANALYSES_SERVICES, analysesParams);
+  const analyses = computed(() => store.getters.getAnalysesServicesSimple)  
 
   store.dispatch(ActionTypes.FETCH_METHODS);  
   const methods = computed(() => store.getters.getMethods)  
 
-  const { executeMutation: createMethod } = useMutation(ADD_METHOD);
-  const { executeMutation: updateMethod } = useMutation(EDIT_METHOD);
-
-  function addMethod(): void {
-    const payload = { name: method.name, keyword: method.keyword, description: method.description}
-    createMethod({ payload }).then((result) => {
-      store.dispatch(ActionTypes.ADD_METHOD, result);
-    });
-  }
-
-  function editMethod(): void {
-    const payload = { name: method.name, keyword: method.keyword, description: method.description }
-    updateMethod({ uid: method.uid, payload }).then((result) => {
-      store.dispatch(ActionTypes.UPDATE_METHOD, result);
-    });
-  }
-
-  function selectMethod(obj: IMethod): void {
-    Object.assign(method, { ...obj})
-  }
-  
-  function resetMethod(): void {
-    Object.assign(method, { ...({} as IMethod)})
-  }
-
   function FormManager(create: boolean, obj = {} as IMethod): void {
     formAction.value = create;
     showModal.value = true;
@@ -178,10 +99,15 @@
     }
   }
 
-  function saveForm():void {
+  function getAnalyses(method :IMethod) {
-    if (formAction.value === true) addMethod();
+    let final: string[] = [];
-    if (formAction.value === false) editMethod();
+    analyses.value?.forEach(an => {
-    showModal.value = false;
+      if(an?.methods?.some(m => m.uid == method?.uid)) {
+        final.push(an?.name)
+      }
+    })
+    return final.join(', ');
   }
 
+
 </script>