irgi/Kdm-Product-Mobile
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ProductSerialPage): slicng UI filter

Browse Source
This commit is contained in:
herirudini
2026-02-26 09:13:17 +07:00
parent dfc0f9d939
commit 17f10231fb
2 changed files with 54 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -25,6 +25,9 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<!-- TODO: Remove this on production -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</body> </body>
</html> </html>

60
src/views/product/ProductSerialPage.vue
View File

@@ -8,14 +8,14 @@
<div class="p-4"> <div class="p-4">
<div class="flex items-center justify-between w-full aspect-auto mb-6 mt-4"> <div class="flex items-center justify-between w-full aspect-auto mb-6 mt-4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<ion-button size="medium" fill="clear" color="dark" @click="router.back()"> <ion-button size="default" fill="clear" color="dark" @click="router.back()">
<div class="font-semibold flex items-center gap-2"> <div class="font-semibold flex items-center gap-2">
<ion-icon slot="icon-only" :icon="caretBackCircleSharp" class="text-2xl"></ion-icon> <ion-icon slot="icon-only" :icon="caretBackCircleSharp" class="text-2xl"></ion-icon>
<div>Kembali</div> <div>Kembali</div>
</div> </div>
</ion-button> </ion-button>
</div> </div>
<img src="@/assets/images/Logo-KDM-merah.png" alt="Logo KDM" class="w-[20%] cursor-pointer" button <img src="@/assets/images/Logo-KDM-merah.png" alt="Logo KDM" class="w-[20%] cursor-pointer"
@click="router.push('/')"> @click="router.push('/')">
</div> </div>
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
@@ -26,7 +26,7 @@
<h2 class="text-2xl font-semibold">APM CLOPPY</h2> <h2 class="text-2xl font-semibold">APM CLOPPY</h2>
<div class="flex gap-2 items-center justify-between text-gray-500"> <div class="flex gap-2 items-center justify-between text-gray-500">
<div>Detail informasi</div> <div>Detail informasi</div>
<ion-button size="small" fill="clear" class="text-gray-500 rounded-md"> <ion-button id="show-filter" size="small" fill="clear" class="text-gray-500 rounded-md">
<ion-icon slot="icon-only" :icon="funnelOutline"></ion-icon> <ion-icon slot="icon-only" :icon="funnelOutline"></ion-icon>
</ion-button> </ion-button>
</div> </div>
@@ -53,18 +53,61 @@
</ion-card> </ion-card>
<AppFooter color="white" /> <AppFooter color="white" />
</div> </div>
<ion-modal ref="modal" trigger="show-filter" @willDismiss="onWillDismiss">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="cancel()">Cancel</ion-button>
</ion-buttons>
<ion-title>Filter</ion-title>
<ion-buttons slot="end">
<ion-button :strong="true" @click="confirm()">Confirm</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-select placeholder="Pilih Status" label="Status" label-placement="stacked" v-model="selectedStatus">
<ion-select-option value="">Semua</ion-select-option>
<ion-select-option value="used">Dipakai</ion-select-option>
<ion-select-option value="ready">Ready To Use</ion-select-option>
<ion-select-option value="maintenance">Maintenance</ion-select-option>
</ion-select>
</ion-item>
</ion-content>
</ion-modal>
</ion-content> </ion-content>
</ion-page> </ion-page>
</template> </template>
<script setup> <script setup lang="ts">
import { IonPage, IonContent, IonSearchbar, IonCard, IonCardContent, IonIcon, IonButton } from '@ionic/vue' import { IonPage, IonContent, IonSearchbar, IonCard, IonCardContent, IonIcon, IonButton, IonModal, IonHeader, IonToolbar, IonButtons, IonTitle, IonItem, IonSelect, IonSelectOption } from '@ionic/vue'
import { OverlayEventDetail } from '@ionic/core/components';
import AppFooter from '@/components/common/AppFooter.vue' import AppFooter from '@/components/common/AppFooter.vue'
import SerialItemCard from '@/components/product/SerialItemCard.vue' import SerialItemCard from '@/components/product/SerialItemCard.vue'
import { funnelOutline, caretBackCircleSharp } from 'ionicons/icons' import { funnelOutline, caretBackCircleSharp } from 'ionicons/icons'
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router = useRouter();
const modal = ref();
const selectedStatus = ref('')
const cancel = () => modal.value.$el.dismiss(null, 'cancel');
const confirm = () => {
console.log('Selected:', selectedStatus.value)
modal.value?.$el.dismiss(selectedStatus.value, 'confirm')
}
const onWillDismiss = (event: CustomEvent<OverlayEventDetail>) => {
const { role } = event.detail;
console.log({ role })
};
const serialItems = [ const serialItems = [
{ {
id: 'ididi',
serial: 'APM001 INT', serial: 'APM001 INT',
production: '04-02-2026', production: '04-02-2026',
status: 'used', status: 'used',
@@ -73,6 +116,7 @@ const serialItems = [
history: '2x Maintenance' history: '2x Maintenance'
}, },
{ {
id: 'ididi',
serial: 'APM002 INT', serial: 'APM002 INT',
production: '12-03-2026', production: '12-03-2026',
status: 'ready', status: 'ready',
@@ -81,6 +125,7 @@ const serialItems = [
history: '1x Maintenance' history: '1x Maintenance'
}, },
{ {
id: 'ididi',
serial: 'APM003 INT', serial: 'APM003 INT',
production: '04-02-2026', production: '04-02-2026',
status: 'used', status: 'used',
@@ -89,6 +134,7 @@ const serialItems = [
history: '2x Maintenance' history: '2x Maintenance'
}, },
{ {
id: 'ididi',
serial: 'APM004 INT', serial: 'APM004 INT',
production: '12-03-2026', production: '12-03-2026',
status: 'maintenance', status: 'maintenance',
@@ -97,8 +143,4 @@ const serialItems = [
history: '1x Maintenance' history: '1x Maintenance'
}, },
] ]
import { useRouter } from 'vue-router';
const router = useRouter();
</script> </script>