feat: add year selection to reports and contracts, update API calls t…

…o filter by year
bps-kota-bontang · Nov 8, 2024 · 8b8b7ea · 8b8b7ea
1 parent 5193e17
commit 8b8b7ea
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 87 deletions.
diff --git a/src/api/activityApi.ts b/src/api/activityApi.ts
@@ -39,14 +39,22 @@ export const updateActivity = async (id: string, payload: any) => {
   return result;
 };
 
-export const getActivities = async () => {
+export const getActivities = async (year: string = "") => {
   const auth = useAuthStore();
 
-  const response = await fetch(`${BASE_URL}/v1/activities`, {
-    headers: {
-      Authorization: `Bearer ${auth.token}`,
-    },
-  });
+  const query: any = {};
+  if (year) {
+    query.year = year;
+  }
+
+  const response = await fetch(
+    `${BASE_URL}/v1/activities?` + new URLSearchParams(query),
+    {
+      headers: {
+        Authorization: `Bearer ${auth.token}`,
+      },
+    }
+  );
   const result = await response.json();
 
   if (!response.ok) {

diff --git a/src/api/outputApi.ts b/src/api/outputApi.ts
@@ -39,14 +39,22 @@ export const updateOutput = async (id: string, payload: any) => {
   return result;
 };
 
-export const getOutputs = async () => {
+export const getOutputs = async (year: string = "") => {
   const auth = useAuthStore();
 
-  const response = await fetch(`${BASE_URL}/v1/outputs`, {
-    headers: {
-      Authorization: `Bearer ${auth.token}`,
-    },
-  });
+  const query: any = {};
+  if (year) {
+    query.year = year;
+  }
+
+  const response = await fetch(
+    `${BASE_URL}/v1/outputs?` + new URLSearchParams(query),
+    {
+      headers: {
+        Authorization: `Bearer ${auth.token}`,
+      },
+    }
+  );
   const result = await response.json();
 
   if (!response.ok) {

diff --git a/src/api/partnerApi.ts b/src/api/partnerApi.ts
@@ -39,15 +39,23 @@ export const updatePartner = async (id: string, payload: any) => {
   return result;
 };
 
-export const getPartners = async () => {
+export const getPartners = async (year: string = "") => {
   const auth = useAuthStore();
 
-  const response = await fetch(`${BASE_URL}/v1/partners`, {
-    headers: {
-      Authorization: `Bearer ${auth.token}`,
-      "Content-Type": "application/json",
-    },
-  });
+  const query: any = {};
+  if (year) {
+    query.year = year;
+  }
+
+  const response = await fetch(
+    `${BASE_URL}/v1/partners?` + new URLSearchParams(query),
+    {
+      headers: {
+        Authorization: `Bearer ${auth.token}`,
+        "Content-Type": "application/json",
+      },
+    }
+  );
   const result = await response.json();
 
   if (!response.ok) {

diff --git a/src/components/contract/FormContractByActivity.vue b/src/components/contract/FormContractByActivity.vue
@@ -80,6 +80,9 @@ import { ElNotification, type FormInstance, type FormRules, type UploadFile, typ
 import { getActivities } from "@/api/activityApi";
 import { getPartners, downloadPartners } from "@/api/partnerApi";
 import { formatNumber, formatParserNumber } from "@/utils/currency";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const formRef = ref<FormInstance>();
 const fileInput = ref<UploadInstance>();
@@ -256,7 +259,9 @@ const showNotification = async (title: string, message: string, type: string) =>
 }
 
 onMounted(async () => {
-  activities.value = await getActivities();
-  partners.value = await getPartners();
+  partners.value = await getPartners(route.query.year?.toString());
+  activities.value = await getActivities(route.query.year?.toString());
 });
+
+watch(() => route.query.year?.toString(), getActivities, { immediate: true });
 </script>
diff --git a/src/components/contract/FormContractByPartner.vue b/src/components/contract/FormContractByPartner.vue
@@ -49,6 +49,9 @@ import { formatDateOriginal, generatePeriods } from "@/utils/date";
 import { createContract } from "@/api/contractApi";
 import { ElNotification, type FormInstance, type FormRules } from "element-plus";
 import { getActivities } from "@/api/activityApi";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const formRef = ref<FormInstance>();
 
@@ -173,7 +176,10 @@ const showNotification = async (title: string, message: string, type: string) =>
 }
 
 onMounted(async () => {
-  partners.value = await getPartners();
-  activities.value = await getActivities();
+  partners.value = await getPartners(route.query.year?.toString());
+  activities.value = await getActivities(route.query.year?.toString());
 });
+
+watch(() => route.query.year?.toString(), getActivities, { immediate: true });
+
 </script>
diff --git a/src/components/report/FormReportByActivity.vue b/src/components/report/FormReportByActivity.vue
@@ -64,6 +64,9 @@ import { generatePeriods } from "@/utils/date";
 import { downloadPartners, getPartners } from "@/api/partnerApi";
 import { downloadTemplatePartner } from "@/api/reportApi";
 import { getContractActivityVolume } from "@/api/contractApi";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const formRef = ref<FormInstance>();
 const fileInput = ref<UploadInstance>();
@@ -220,7 +223,10 @@ watch(
 );
 
 onMounted(async () => {
-  outputs.value = await getOutputs();
-  partners.value = await getPartners();
+  outputs.value = await getOutputs(route.query.year?.toString());
+  partners.value = await getPartners(route.query.year?.toString());
 });
+
+watch(() => route.query.year?.toString(), getOutputs, { immediate: true });
+
 </script>
diff --git a/src/components/report/FormReportByPartner.vue b/src/components/report/FormReportByPartner.vue
@@ -1,51 +1,22 @@
 <template>
-  <el-form
-    ref="formRef"
-    v-loading="loading"
-    :model="form"
-    :rules="rules"
-    label-width="auto"
-    label-position="top"
-  >
+  <el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="auto" label-position="top">
     <el-form-item required label="Mitra" prop="partner.partnerId">
-      <el-select
-        v-model="form.partner.partnerId"
-        placeholder="Pilih Nama Mitra"
-        clearable
-        filterable
-      >
-        <el-option
-          v-for="partner in partners"
-          :key="partner._id"
-          :label="partner.name"
-          :value="partner._id"
-        >
+      <el-select v-model="form.partner.partnerId" placeholder="Pilih Nama Mitra" clearable filterable>
+        <el-option v-for="partner in partners" :key="partner._id" :label="partner.name" :value="partner._id">
           <span style="float: left">{{ partner.name }}</span>
-          <span
-            style="
+          <span style="
               float: right;
               color: var(--el-text-color-secondary);
               font-size: 13px;
-            "
-          >
+            ">
             {{ partner.address }}
           </span>
         </el-option>
       </el-select>
     </el-form-item>
     <el-form-item required label="Periode" prop="contract.period">
-      <el-select
-        v-model="form.contract.period"
-        placeholder="Pilih Periode SPK"
-        clearable
-        filterable
-      >
-        <el-option
-          v-for="item in periods"
-          :key="item.value"
-          :label="item.text"
-          :value="item.value"
-        />
+      <el-select v-model="form.contract.period" placeholder="Pilih Periode SPK" clearable filterable>
+        <el-option v-for="item in periods" :key="item.value" :label="item.text" :value="item.value" />
       </el-select>
     </el-form-item>
 
@@ -56,17 +27,11 @@
         </div>
       </template>
       <div style="display: flex; flex-wrap: wrap; gap: 20px">
-        <FormReportOutputItem
-          v-for="(output, index) in form.outputs"
-          :key="index"
-          :index="index"
-          :output="output"
-          @remove="removeOutput(index)"
-        />
+        <FormReportOutputItem v-for="(output, index) in form.outputs" :key="index" :index="index" :output="output"
+          @remove="removeOutput(index)" />
       </div>
 
-      <template #footer
-        ><el-button @click="addOutput">Tambah Output</el-button>
+      <template #footer><el-button @click="addOutput">Tambah Output</el-button>
       </template>
     </el-card>
     <el-form-item required style="margin-top: 20px">
@@ -83,6 +48,9 @@ import FormReportOutputItem from "@/components/report/FormReportOutputItem.vue";
 import { formatDateOriginal, generatePeriods } from "@/utils/date";
 import { createReport } from "@/api/reportApi";
 import { ElNotification, type FormInstance, type FormRules } from "element-plus";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const formRef = ref<FormInstance>();
 
@@ -194,6 +162,8 @@ watch(
 );
 
 onMounted(async () => {
-  partners.value = await getPartners();
+  partners.value = await getPartners(route.query.year?.toString());
 });
+
+watch(() => route.query.year?.toString(), getPartners, { immediate: true });
 </script>
diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -38,3 +38,15 @@ export const generatePeriods = (
   }
   return periods;
 };
+
+export const generateYear = (
+  startYear: number = 2024
+): { value: string; text: string }[] => {
+  const periods = [];
+  const currentYear = new Date().getFullYear();
+  for (let year = currentYear; year >= startYear; year--) {
+    periods.push({ value: year.toString(), text: year.toString() });
+  }
+
+  return periods;
+};
diff --git a/src/views/contract/CreateContractView.vue b/src/views/contract/CreateContractView.vue
@@ -1,15 +1,48 @@
 <template>
-  <el-tabs type="border-card">
-    <el-tab-pane lazy label="Satu Mitra Banyak Kegiatan"
-      ><FormContractByPartner />
-    </el-tab-pane>
-    <el-tab-pane lazy label="Satu Kegiatan Banyak Mitra"
-      ><FormContractByActivity
-    /></el-tab-pane>
-  </el-tabs>
+  <div>
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap:20px">
+        <span>Tahun</span>
+        <el-select v-model="yearSelected" placeholder="Select" clearable style="width: 240px"
+          @change="handleYearChange">
+          <el-option v-for="item in years" :key="item.value" :label="item.text" :value="item.value" />
+        </el-select>
+      </div>
+
+
+    </div>
+    <el-divider />
+
+    <el-tabs type="border-card">
+      <el-tab-pane lazy label="Satu Mitra Banyak Kegiatan">
+        <FormContractByPartner />
+      </el-tab-pane>
+      <el-tab-pane lazy label="Satu Kegiatan Banyak Mitra">
+        <FormContractByActivity />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import FormContractByPartner from "@/components/contract/FormContractByPartner.vue";
 import FormContractByActivity from "@/components/contract/FormContractByActivity.vue";
+import { useRoute, useRouter } from "vue-router";
+import { generateYear } from "@/utils/date";
+
+const route = useRoute();
+const router = useRouter();
+
+const years = generateYear();
+
+const yearSelected = ref(route.query.year);
+
+const handleYearChange = (value: string) => {
+  const query: any = {};
+  if (value) {
+    query.year = value;
+  }
+  router.push({ name: "createContract", query });
+};
 </script>
diff --git a/src/views/report/CreateReportView.vue b/src/views/report/CreateReportView.vue
@@ -1,15 +1,47 @@
 <template>
-  <el-tabs type="border-card">
-    <el-tab-pane  lazy label="Satu Mitra Banyak Output"
-      ><FormReportByPartner />
-    </el-tab-pane>
-    <el-tab-pane lazy  label="Satu Output Banyak Mitra"
-      ><FormReportByActivity
-    /></el-tab-pane>
-  </el-tabs>
+  <div>
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap:20px">
+        <span>Tahun</span>
+        <el-select v-model="yearSelected" placeholder="Select" clearable style="width: 240px"
+          @change="handleYearChange">
+          <el-option v-for="item in years" :key="item.value" :label="item.text" :value="item.value" />
+        </el-select>
+      </div>
+
+
+    </div>
+    <el-divider />
+    <el-tabs type="border-card">
+      <el-tab-pane lazy label="Satu Mitra Banyak Output">
+        <FormReportByPartner />
+      </el-tab-pane>
+      <el-tab-pane lazy label="Satu Output Banyak Mitra">
+        <FormReportByActivity />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import FormReportByPartner from "@/components/report/FormReportByPartner.vue";
 import FormReportByActivity from "@/components/report/FormReportByActivity.vue";
+import { useRoute, useRouter } from "vue-router";
+import { generateYear } from "@/utils/date";
+
+const route = useRoute();
+const router = useRouter();
+
+const years = generateYear();
+
+const yearSelected = ref(route.query.year);
+
+const handleYearChange = (value: string) => {
+  const query: any = {};
+  if (value) {
+    query.year = value;
+  }
+  router.push({ name: "createReport", query });
+};
 </script>