feat: add year input fields to activity, output, and partner forms wi…

…th validation
bps-kota-bontang · Nov 8, 2024 · c415f0d · c415f0d
1 parent 8b8b7ea
commit c415f0d
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 7 deletions.
diff --git a/src/components/activity/DialogFormEditActivity.vue b/src/components/activity/DialogFormEditActivity.vue
@@ -12,14 +12,18 @@
             </el-form-item>
             <el-form-item required label="Kategori" prop="category">
                 <el-select v-model="form.category" placeholder="Pilih Jenis Kegiatan" clearable filterable>
-                    <el-option v-for="category in activityCategories" :key="category.value" :label="category.text" :value="category.value" />
+                    <el-option v-for="category in activityCategories" :key="category.value" :label="category.text"
+                        :value="category.value" />
                 </el-select>
             </el-form-item>
             <el-form-item required label="Tim" prop="team">
                 <el-select v-model="form.team" placeholder="Pilih Nama Tim" clearable filterable>
                     <el-option v-for="team in teams" :key="team.value" :label="team.text" :value="team.value" />
                 </el-select>
             </el-form-item>
+            <el-form-item required label="Tahun Kegiatan" prop="year">
+                <el-input v-model="form.year" placeholder="Masukkan Tahun Kegiatan" />
+            </el-form-item>
             <el-form-item label="Khusus">
                 <el-switch v-model="form.isSpecial" />
             </el-form-item>
@@ -47,6 +51,7 @@ const initialState = {
     unit: "",
     category: "",
     team: "",
+    year: "",
     isSpecial: false
 };
 
@@ -86,6 +91,13 @@ const rules = reactive<FormRules<any>>({
             trigger: "change",
         },
     ],
+    year: [
+        {
+            required: true,
+            message: "Tahun perlu terisi",
+            trigger: "change",
+        },
+    ],
 });
 
 const formRef = ref<FormInstance>();
@@ -150,6 +162,7 @@ watch(() => props.id, async (newId) => {
         form.unit = data.unit;
         form.category = data.category;
         form.team = data.team;
+        form.year = data.year;
         form.isSpecial = data.isSpecial;
     }
 }, { immediate: true });

diff --git a/src/components/output/DialogFormEditOutput.vue b/src/components/output/DialogFormEditOutput.vue
@@ -13,6 +13,9 @@
             <el-form-item required label="Satuan Output" prop="unit">
                 <el-input v-model="form.unit" placeholder="Masukkan Satuan Output" />
             </el-form-item>
+            <el-form-item required label="Tahun Kegiatan" prop="year">
+                <el-input v-model="form.year" placeholder="Masukkan Tahun Output" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <div class="dialog-footer">
@@ -36,7 +39,8 @@ const initialState = {
         activityId: "",
     },
     name: "",
-    unit: ""
+    unit: "",
+    year: "",
 };
 
 const rules = reactive<FormRules<any>>({
@@ -61,6 +65,13 @@ const rules = reactive<FormRules<any>>({
             trigger: "blur",
         },
     ],
+    year: [
+        {
+            required: true,
+            message: "Tahun Output perlu terisi",
+            trigger: "blur",
+        },
+    ],
 });
 
 const formRef = ref<FormInstance>();
@@ -123,6 +134,7 @@ watch(() => props.id, async (newId) => {
         form.activity.activityId = data.activity._id;
         form.name = data.name;
         form.unit = data.unit;
+        form.year = data.year;
     }
 }, { immediate: true });
 

diff --git a/src/components/partner/DialogFormEditPartner.vue b/src/components/partner/DialogFormEditPartner.vue
@@ -10,6 +10,9 @@
             <el-form-item required label="Alamat" prop="address">
                 <el-input v-model="form.address" placeholder="Masukkan Alamat Mitra" />
             </el-form-item>
+            <el-form-item required label="Tahun Mitra" prop="year">
+                <el-input v-model="form.year" placeholder="Masukkan Tahun Mitra" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <div class="dialog-footer">
@@ -30,7 +33,8 @@ import { ElNotification, type FormInstance, type FormRules } from "element-plus"
 const initialState = {
     name: "",
     nik: "",
-    address: ""
+    address: "",
+    year: "",
 };
 
 const rules = reactive<FormRules<any>>({
@@ -56,6 +60,13 @@ const rules = reactive<FormRules<any>>({
             trigger: "blur",
         },
     ],
+    year: [
+        {
+            required: true,
+            message: "Tahun Mitra perlu terisi",
+            trigger: "blur",
+        },
+    ],
 });
 
 const formRef = ref<FormInstance>();
@@ -118,6 +129,7 @@ watch(() => props.id, async (newId) => {
         form.name = data.name;
         form.nik = data.nik;
         form.address = data.address;
+        form.year = data.year;
     }
 }, { immediate: true });
 

diff --git a/src/views/activity/AddActivityView.vue b/src/views/activity/AddActivityView.vue
@@ -11,14 +11,18 @@
     </el-form-item>
     <el-form-item required label="Kategori" prop="category">
       <el-select v-model="form.category" placeholder="Pilih Jenis Kegiatan" clearable filterable>
-        <el-option v-for="category in activityCategories" :key="category.value" :label="category.text" :value="category.value" />
+        <el-option v-for="category in activityCategories" :key="category.value" :label="category.text"
+          :value="category.value" />
       </el-select>
     </el-form-item>
     <el-form-item required label="Tim" prop="team">
       <el-select v-model="form.team" placeholder="Pilih Nama Tim" clearable filterable>
         <el-option v-for="team in teams" :key="team.value" :label="team.text" :value="team.value" />
       </el-select>
     </el-form-item>
+    <el-form-item required label="Tahun" prop="year">
+      <el-input v-model="form.year" placeholder="Masukkan Tahun Kegiatan"  />
+    </el-form-item>
     <el-form-item label="Khusus" prop="isSpecial">
       <el-switch v-model="form.isSpecial" />
     </el-form-item>
@@ -73,6 +77,13 @@ const rules = reactive<FormRules<any>>({
       trigger: "change",
     },
   ],
+  year: [
+    {
+      required: true,
+      message: "Tahun perlu terisi",
+      trigger: "change",
+    },
+  ],
 });
 
 const initialState = {
@@ -81,6 +92,7 @@ const initialState = {
   unit: "",
   category: "",
   team: "",
+  year: "",
   isSpecial: false
 };
 

diff --git a/src/views/activity/ListActivityView.vue b/src/views/activity/ListActivityView.vue
@@ -33,12 +33,13 @@
       <el-table-column label="Kategori" prop="category" :formatter="categoryFormatter" :filters="activityCategories"
         :filter-method="filterCategory" column-key="category" />
       <el-table-column label="Tim" prop="team" :filters="teams" :filter-method="filterTeam" column-key="team" />
+      <el-table-column label="Tahun" prop="year" :filters="generateYear()" />
       <el-table-column align="center" label="Status" prop="isSpecial" :filters="[
         { text: 'Khusus', value: true },
         { text: 'Biasa', value: false },
-      ]" :filter-method="filterIsSpecial" column-key="isSpecial" >
+      ]" :filter-method="filterIsSpecial" column-key="isSpecial">
         <template #default="scope">
-          <el-tag effect="dark">{{scope.row.isSpecial ? "Khusus" : "Biasa"}}</el-tag>
+          <el-tag effect="dark">{{ scope.row.isSpecial ? "Khusus" : "Biasa" }}</el-tag>
         </template>
       </el-table-column>
 
@@ -84,6 +85,7 @@ import { ElNotification, ElTable } from "element-plus";
 import { teams, activityCategories } from "@/utils/constant";
 import { createInitialFilter, type Filter } from "@/types/filter";
 import type { Activity } from "@/types/activity";
+import { generateYear } from "@/utils/date";
 
 const router = useRouter();
 const auth = useAuthStore();

diff --git a/src/views/output/AddOutputView.vue b/src/views/output/AddOutputView.vue
@@ -11,6 +11,9 @@
     <el-form-item required label="Satuan" prop="unit">
       <el-input v-model="form.unit" placeholder="Masukkan Satuan Output" />
     </el-form-item>
+    <el-form-item required label="Tahun" prop="year">
+      <el-input v-model="form.year" placeholder="Masukkan Tahun Output"  />
+    </el-form-item>
 
     <el-form-item required style="margin-top: 20px">
       <el-button @click="submit(formRef)" type="primary">Tambah</el-button>
@@ -49,6 +52,13 @@ const rules = reactive<FormRules<any>>({
       trigger: "blur",
     },
   ],
+  year: [
+    {
+      required: true,
+      message: "Tahun output perlu terisi",
+      trigger: "blur",
+    },
+  ],
 });
 
 const initialState = {
@@ -57,6 +67,7 @@ const initialState = {
   },
   name: "",
   unit: "",
+  year: "",
 };
 
 let feedback = ref({

diff --git a/src/views/output/ListOutputView.vue b/src/views/output/ListOutputView.vue
@@ -28,6 +28,7 @@
       <el-table-column label="Nama Kegiatan" sortable prop="activity.name" />
       <el-table-column label="Nama" sortable prop="name" />
       <el-table-column label="Satuan" prop="unit" />
+      <el-table-column label="Tahun" prop="year" :filters="generateYear()" />
 
       <el-table-column align="right">
         <template #header>
@@ -65,6 +66,7 @@ import { getOutputs, deleteOutput, deleteOutputs, downloadOutputTemplate, downlo
 import { BASE_URL } from "@/api/api";
 import { ElNotification, ElTable } from "element-plus";
 import { useAuthStore } from "@/stores/auth";
+import { generateYear } from "@/utils/date";
 
 const router = useRouter();
 const route = useRoute();

diff --git a/src/views/partner/AddPartnerView.vue b/src/views/partner/AddPartnerView.vue
@@ -9,7 +9,9 @@
     <el-form-item required label="Alamat" prop="address">
       <el-input v-model="form.address" placeholder="Masukkan Alamat Partner" />
     </el-form-item>
-
+    <el-form-item required label="Tahun" prop="year">
+      <el-input v-model="form.year" placeholder="Masukkan Tahun Partner" />
+    </el-form-item>
     <el-form-item required style="margin-top: 20px">
       <el-button @click="submit(formRef)" type="primary">Tambah</el-button>
       <el-button @click="reset(formRef)">Bersihkan</el-button>
@@ -47,12 +49,20 @@ const rules = reactive<FormRules<any>>({
       trigger: "blur",
     },
   ],
+  year: [
+    {
+      required: true,
+      message: "Tahun mitra perlu terisi",
+      trigger: "blur",
+    },
+  ],
 });
 
 const initialState = {
   name: "",
   nik: "",
   address: "",
+  year: "",
 };
 
 let feedback = ref({

diff --git a/src/views/partner/ListPartnerView.vue b/src/views/partner/ListPartnerView.vue
@@ -27,6 +27,7 @@
       <el-table-column label="Nama" sortable prop="name" />
       <el-table-column label="NIK" prop="nik" />
       <el-table-column label="Alamat" prop="address" />
+      <el-table-column label="Tahun" prop="year" :filters="generateYear()" />
 
       <el-table-column align="right">
         <template #header>
@@ -63,6 +64,7 @@ import { getPartners, deletePartner, deletePartners, downloadPartnerTemplate } f
 import { BASE_URL } from "@/api/api";
 import { ElNotification, ElTable } from "element-plus";
 import { useAuthStore } from "@/stores/auth";
+import { generateYear } from "@/utils/date";
 
 const router = useRouter();
 const route = useRoute();