Merge branch '6-add-filter-for-spk-with-or-without-ob' into 'main'

Resolve "Add Filter for SPK with or without OB"

Closes #6

See merge request sapa-mitra/sapa-mitra-frontend!1

components.d.ts

@@ -39,6 +39,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "chart.js": "^4.4.3",
-    "element-plus": "^2.7.6",
+    "element-plus": "^2.7.7",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -28,9 +28,9 @@
     "@vue/tsconfig": "^0.5.1",
     "npm-run-all2": "^6.2.2",
     "typescript": "~5.4.5",
-    "unplugin-auto-import": "^0.17.6",
+    "unplugin-auto-import": "^0.17.8",
     "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.3",
+    "vite": "^5.3.4",
     "vue-tsc": "^2.0.26"
   },
   "eslintConfig": {

src/components/activity/DialogFormEditActivity.vue

@@ -20,6 +20,9 @@
                     <el-option v-for="team in teams" :key="team.value" :label="team.text" :value="team.value" />
                 </el-select>
             </el-form-item>
+            <el-form-item label="Khusus">
+                <el-switch v-model="form.isSpecial" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <div class="dialog-footer">
@@ -43,7 +46,8 @@ const initialState = {
     code: "",
     unit: "",
     category: "",
-    team: ""
+    team: "",
+    isSpecial: false
 };
 
 const rules = reactive<FormRules<any>>({
@@ -146,6 +150,7 @@ watch(() => props.id, async (newId) => {
         form.unit = data.unit;
         form.category = data.category;
         form.team = data.team;
+        form.isSpecial = data.isSpecial;
     }
 }, { immediate: true });
 

src/types/activity.ts

@@ -8,4 +8,5 @@ export type Activity = {
   unit: string;
   category: CategoryActivity;
   team: Team;
+  isSpecial: boolean
 };

src/types/contract.ts

@@ -21,6 +21,7 @@ export type Contract = {
     createdBy: Team;
     status: StatusContract;
   } & Document)[];
+  hasSpecial: boolean;
   signDate: Date;
   handOverDate: Date;
   penalty: number;

src/types/filter.ts

@@ -4,14 +4,16 @@ export type Filter = {
   status?: string[];
   limit?: boolean[];
   category?: string[];
+  isSpecial?: boolean[];
+  hasSpecial?: boolean[];
   total?: boolean[];
 };
 
 type FilterType = "activity" | "contract";
 
 const initialFilterConfig: Record<FilterType, Partial<Filter>> = {
-  contract: { team: [], period: [], status: [], limit: [], total: [] },
-  activity: { team: [], category: [] },
+  contract: { team: [], period: [], status: [], limit: [], total: [], hasSpecial: [] },
+  activity: { team: [], category: [], isSpecial: [] },
 };
 
 const deepClone = <T>(obj: T): T => {

src/views/activity/AddActivityView.vue

@@ -19,7 +19,9 @@
         <el-option v-for="team in teams" :key="team.value" :label="team.text" :value="team.value" />
       </el-select>
     </el-form-item>
-
+    <el-form-item label="Khusus" prop="isSpecial">
+      <el-switch v-model="form.isSpecial" />
+    </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>
@@ -78,7 +80,8 @@ const initialState = {
   code: "",
   unit: "",
   category: "",
-  team: ""
+  team: "",
+  isSpecial: false
 };
 
 let feedback = ref({

src/views/activity/ListActivityView.vue

@@ -33,6 +33,14 @@
       <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 align="center" label="Status" prop="isSpecial" :filters="[
+        { text: 'Khusus', value: true },
+        { text: 'Biasa', value: false },
+      ]" :filter-method="filterIsSpecial" column-key="isSpecial" >
+        <template #default="scope">
+          <el-tag effect="dark">{{scope.row.isSpecial ? "Khusus" : "Biasa"}}</el-tag>
+        </template>
+      </el-table-column>
 
       <el-table-column align="right">
         <template #header>
@@ -115,6 +123,12 @@ const paginatedData = computed(() => {
     });
   }
 
+  if (filter.value.isSpecial?.length) {
+    paginatedData = paginatedData.filter((item) => {
+      return filter.value.isSpecial?.includes(item.isSpecial);
+    });
+  }
+
   if (search.value) {
     paginatedData = paginatedData.filter(
       (data: any) =>
@@ -150,12 +164,20 @@ const handleFilterChange = (newFilters: any) => {
   if (newFilters.category) {
     filter.value.category = newFilters.category
   }
+
+  if (newFilters.isSpecial) {
+    filter.value.isSpecial = newFilters.isSpecial
+  }
 }
 
 const filterTeam = (value: string, row: any) => {
   return row.team == value
 };
 
+const filterIsSpecial = (value: boolean, row: any) => {
+  return row.isSpecial == value
+};
+
 const filterCategory = (value: string, row: any) => {
   return row.category == value
 };

src/views/contract/ListContractView.vue

@@ -38,6 +38,7 @@
               <el-table-column label="Rate" prop="rate" />
               <el-table-column label="Total" prop="total" />
               <el-table-column label="Team" prop="createdBy" />
+              <el-table-column label="Khusus" prop="isSpecial" :formatter="isSpecialFormatter" />
               <el-table-column label="Status" prop="status" />
 
               <el-table-column label="Aksi">
@@ -60,7 +61,8 @@
                     scope.row.status == 'UNVERIFIED' &&
                     user.position == 'KETUA' &&
                     (user.team == scope.row.createdBy || user.team == 'TU') &&
-                    !props.row.isExceeded
+                    !props.row.isExceeded &&
+                    ((props.row.hasSpecial && props.row.activities.length == 1) || (!props.row.hasSpecial))
                   " size="small" type="primary" @click="handleVerifyActivity(props.row._id, scope.row._id)">
                     Verifikasi
                   </el-button>
@@ -113,7 +115,14 @@
           </el-space>
         </template>
       </el-table-column>
-
+      <el-table-column column-key="hasSpecial" label="Khusus" :filters="[
+        { text: 'Ada', value: true },
+        { text: 'Tidak Ada', value: false },
+      ]" :filter-method="filterHasSpecial">
+        <template #default="scope">
+          <el-tag  effect="dark">{{ scope.row.hasSpecial ? 'Ada' : 'Tidak Ada' }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column sortable label="Batas" column-key="limit" prop="isExceeded" :filters="[
         { text: 'Aman', value: false },
         { text: 'Tidak Aman', value: true },
@@ -274,6 +283,14 @@ const paginatedData = computed(() => {
     });
   }
 
+  if (filter.value.hasSpecial?.length) {
+    
+    paginatedData = paginatedData.filter((item) => {
+      
+      return filter.value.hasSpecial?.includes(item.hasSpecial)
+    });
+  }
+
   if (search.value) {
     paginatedData = paginatedData.filter(
       (data: any) =>
@@ -309,6 +326,10 @@ const handleFilterChange = (newFilters: any) => {
   if (newFilters.limit) {
     filter.value.limit = newFilters.limit
   }
+
+  if (newFilters.hasSpecial) {
+    filter.value.hasSpecial = newFilters.hasSpecial
+  }
 }
 
 const handlePageChange = (page: number) => {
@@ -397,10 +418,14 @@ const filterTeam = (value: string, row: any) => {
   return [...new Set(teams)].includes(value);
 };
 
-const filterLimit = (value: string, row: any) => {
+const filterLimit = (value: boolean, row: any) => {
   return row.isExceeded === value;
 };
 
+const filterHasSpecial = (value: boolean, row: any) => {
+  return row.hasSpecial === value;
+};
+
 const filterStatus = (value: string, row: any) => {
   const totalActivities = row.activities.length;
   const countVerified = row.activities.filter(
@@ -517,6 +542,10 @@ const dateFormatter = (row: any) => {
   return `${formatDate(row.startDate)} - ${formatDate(row.endDate)}`;
 };
 
+const isSpecialFormatter = (row: any) => {
+  return row.isSpecial ? "Ya" : "Tidak";
+};
+
 const contractStatus = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
   const totalActivities = row.activities.length;
   const countVerified = row.activities.filter(