implemented accounting pages

components/server/IssueSlipTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['issue-slip-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Ticket No</div>
+        <input v-model="issueSlipSearchFilter" @change="searchIssueSlip()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
@@ -26,7 +31,12 @@
                         {{ issueSlip.customer }}</td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        {{ issueSlip.primaryID }}</td>
+                        <nuxt-link to="/issueSlips" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenIssueSlip(issueSlip.primaryID)">
+                            {{ issueSlip.primaryID }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
                         {{ issueSlip.ticketNo }}</td>
@@ -39,28 +49,79 @@
         </table>
     </div>
 </template>
-  
-  
+
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenIssueSlip = (id) => {
+    store.commit('setChosenIssueSlip', id);
+    store.commit('changeToIssueSlip');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const issueSlipSearchFilter = ref('');
 const darkMode = ref(true)
 const issueSlips = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    issueSlipSearchFilter.value = '';
+    await getIssueSlips();
+}
+
 //get all issueSlips
 const getIssueSlips = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredIssueSlipsByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
+            issueSlips.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all issue slips based on the searched client
+const getFilteredIssueSlipsByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByClient/${clientFilter.value}`);
         issueSlips.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
-onMounted(() => {
-    getIssueSlips();
+//get all issue slips based on the searched issue slip id
+const searchIssueSlip = async () => {
+    if (issueSlipSearchFilter.value === '') {
+        await getIssueSlips();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByTicketNo/${issueSlipSearchFilter.value}`);
+            issueSlips.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getIssueSlips);
+watch(searchable, updateSearchTerm);
+
+
+onMounted(async () => {
+    await getIssueSlips();
 });
 </script>
 
@@ -69,7 +130,7 @@ export default {
     name: "IssueSlipTable",
 };
 </script>
-    
+
 <style scoped>
 .data {
     display: flex;
@@ -77,7 +138,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
@@ -92,6 +152,46 @@ export default {
     background-color: #fff;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.issue-slip-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -118,6 +218,27 @@ export default {
     border-bottom: 0.0625rem solid #8e8e8e;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.clientLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
 .tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
@@ -218,4 +339,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>