setting tampilan belum fix
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import {Icon} from "@iconify/vue";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
item: Object;
|
||||
// type: string;
|
||||
}>(),
|
||||
{
|
||||
item: () => ({}),
|
||||
// type: () => ({}),
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(["detail"]);
|
||||
</script>
|
||||
<template>
|
||||
<v-card
|
||||
elevation="10"
|
||||
:class="[
|
||||
'mx-auto',
|
||||
item.status === 'planned'
|
||||
? ''
|
||||
: item.status === 'in-progress'
|
||||
? 'bg-info'
|
||||
: item.status === 'completed'
|
||||
? 'bg-success'
|
||||
: item.status === 'cancelled'
|
||||
? 'bg-error'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar
|
||||
size="50"
|
||||
:class="[
|
||||
'mx-auto rounded-md',
|
||||
item.status === 'planned'
|
||||
? ''
|
||||
: item.status === 'in-progress'
|
||||
? 'bg-info'
|
||||
: item.status === 'completed'
|
||||
? 'bg-success'
|
||||
: item.status === 'cancelled'
|
||||
? 'bg-error'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
<Icon
|
||||
icon="solar:user-circle-broken"
|
||||
:class="[
|
||||
item.status === 'planned'
|
||||
? 'text-primary'
|
||||
: item.status === 'in-progress'
|
||||
? 'text-primary'
|
||||
: item.status === 'completed'
|
||||
? 'text-light'
|
||||
: item.status === 'cancelled'
|
||||
? 'text-light'
|
||||
: '',
|
||||
]"
|
||||
height="36"
|
||||
/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<h3>{{item.display}}</h3>
|
||||
<!-- <h3>{{ item.subject.display }}</h3> -->
|
||||
</template>
|
||||
<template v-slot:subtitle> </template>
|
||||
<template v-slot:text>
|
||||
<div class="pl-3">
|
||||
<div class="align-center d-flex">
|
||||
<!-- <Icon icon="mdi:doctor" class="text-primary" height="25" />
|
||||
<h4>actor</h4> -->
|
||||
<!-- <h4>{{ item.participant[0].actor.display }}</h4> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-3 pt-2">
|
||||
<div class="align-center d-flex">
|
||||
<!-- <Icon
|
||||
icon="mdi:hospital-marker"
|
||||
class="text-primary"
|
||||
height="25"
|
||||
/> -->
|
||||
<!-- <h4>location</h4> -->
|
||||
<!-- <h4>Sps. {{ item.location[0].location.display }}</h4> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
|
||||
<!-- <v-btn v-for="itemButton in showButtons" @click="$emit(itemButton.tipe, props?.item)" :color="itemButton.color" class="ms-auto">
|
||||
<v-icon :color="itemButton.color">{{ itemButton.icon }}</v-icon>
|
||||
{{ itemButton.text }}
|
||||
</v-btn> -->
|
||||
</template>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import typeUser from "@/data/dummy/keuangan.type_user.json";
|
||||
import role_menu from "@/data/dummy/keuangan.role_menu.json";
|
||||
import menu from "@/data/dummy/keuangan.menu.json";
|
||||
//misal id = 683d57b2bccc67d467a9e10f
|
||||
// const id=ref('683d57b2bccc67d467a9e10f')
|
||||
// const { data:role_menu } = await useFetch(`/api/role_menu/${id.value}`)
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
}
|
||||
})
|
||||
const updateData = (id) => {
|
||||
console.log("update data:", id);
|
||||
};
|
||||
|
||||
const deleteData = (id) => {
|
||||
console.log("delete data:", id);
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- {{ data() }} -->
|
||||
<!-- {{props.columns}} -->
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left" v-for="(col,index) in columns" :key="index">{{col.label}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in data" :key="index">
|
||||
<td v-for="(col,colIndex) in columns" :key="colIndex">{{item[col.key]}}
|
||||
<template v-if="col.key == 'actions'">
|
||||
<v-btn class="mx-2" @click="updateData(item)">ubah</v-btn>
|
||||
<v-btn @click="deleteData(item)">hapus</v-btn>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</template>
|
||||
@@ -1,32 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const checkbox = ref(true);
|
||||
const { $encodeBase64 } = useNuxtApp();
|
||||
|
||||
const loginKeycloack = async () => {
|
||||
const cookies = useCookie('user_token');
|
||||
try {
|
||||
const response = await $fetch('/api/auth/login', { method: 'POST', mode: 'no-cors' }).then((response) => {
|
||||
if (response.callbackURL !== null || response.callbackURL !== undefined || response.callbackURL !== '') {
|
||||
cookies.value = $encodeBase64('ini_token_user');
|
||||
window.location.href = response.callbackURL
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="d-flex mb-3">
|
||||
<v-col cols="12">
|
||||
<!-- <v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Username</v-label>
|
||||
<v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-label class="font-weight-bold mb-1">Password</v-label>
|
||||
<v-text-field variant="outlined" density="compact" type="password" hide-details color="primary"></v-text-field>
|
||||
<v-text-field variant="outlined" density="compact" type="password" hide-details
|
||||
color="primary"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" class="pt-0">
|
||||
<div class="d-flex flex-wrap align-center">
|
||||
<v-checkbox v-model="checkbox" color="primary" hide-details>
|
||||
<v-checkbox v-model="checkbox" color="primary" hide-details>
|
||||
<template v-slot:label class="text-body-1">Remeber this Device</template>
|
||||
</v-checkbox>
|
||||
<div class="ml-sm-auto">
|
||||
<NuxtLink to="/"
|
||||
class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">Forgot
|
||||
Password ?</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-checkbox>
|
||||
<div class="ml-sm-auto">
|
||||
<NuxtLink to="/" class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">
|
||||
Forgot
|
||||
Password ?</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</v-col> -->
|
||||
<v-col cols="12" class="pt-0">
|
||||
<v-btn to="/" color="primary" size="large" block flat>Sign in</v-btn>
|
||||
<v-btn @click="loginKeycloack" color="primary" size="large" block flat>Sign in</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -3,16 +3,18 @@ import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { useDisplay } from "vuetify";
|
||||
import sidebarItems from "@/components/layout/full/vertical-sidebar/sidebarItem";
|
||||
import { Menu2Icon } from "vue-tabler-icons";
|
||||
const props = defineProps({ items: { type: Object } })
|
||||
const sidebarMenu = ref('');
|
||||
|
||||
const sidebarMenu = shallowRef(sidebarItems);
|
||||
|
||||
const { mdAndDown } = useDisplay();
|
||||
const sDrawer = ref(true);
|
||||
onMounted(() => {
|
||||
sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
|
||||
});
|
||||
watch(mdAndDown, (val) => {
|
||||
sDrawer.value = !val;
|
||||
watch([mdAndDown, () => props.items], ([mdVal, items]) => {
|
||||
sDrawer.value = !mdVal;
|
||||
sidebarMenu.value = items;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const user_profile = useCookie('user_profile');
|
||||
const user_token = useCookie('user_token');
|
||||
const logout = async () => {
|
||||
window.location.href = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=http://localhost:3000`;
|
||||
user_token.value = null;
|
||||
localStorage.removeItem('userProfile')
|
||||
localStorage.removeItem('sidebarItems')
|
||||
navigateTo('/auth/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -16,27 +26,27 @@ import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
|
||||
</template>
|
||||
<v-sheet rounded="md" width="200" elevation="10" class="mt-2">
|
||||
<v-list class="py-0" lines="one" density="compact">
|
||||
<v-list-item value="item1" active-color="primary" >
|
||||
<v-list-item value="item1" active-color="primary">
|
||||
<template v-slot:prepend>
|
||||
<UserIcon stroke-width="1.5" size="20"/>
|
||||
<UserIcon stroke-width="1.5" size="20" />
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="item2" active-color="primary">
|
||||
<template v-slot:prepend>
|
||||
<MailIcon stroke-width="1.5" size="20"/>
|
||||
<MailIcon stroke-width="1.5" size="20" />
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Account</v-list-item-title>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Account</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="item3" active-color="primary">
|
||||
<v-list-item value="item3" active-color="primary">
|
||||
<template v-slot:prepend>
|
||||
<ListCheckIcon stroke-width="1.5" size="20"/>
|
||||
<ListCheckIcon stroke-width="1.5" size="20" />
|
||||
</template>
|
||||
<v-list-item-title class="pl-4 text-body-1">My Task</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pt-4 pb-4 px-5 text-center">
|
||||
<v-btn to="/auth/login" color="primary" variant="outlined" block>Logout</v-btn>
|
||||
<v-btn @click="logout" color="primary" variant="outlined" block>Logout</v-btn>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
const { $decodeBase64 } = useNuxtApp();
|
||||
|
||||
export interface menu {
|
||||
header?: string;
|
||||
title?: string;
|
||||
@@ -14,6 +16,7 @@ export interface menu {
|
||||
type?: string;
|
||||
subCaption?: string;
|
||||
external?: boolean;
|
||||
requiredGroups?: string[];
|
||||
}
|
||||
|
||||
const sidebarItem: menu[] = [
|
||||
@@ -44,16 +47,19 @@ const sidebarItem: menu[] = [
|
||||
title: "Front Pages",
|
||||
icon: "home-angle-linear",
|
||||
to: "/front",
|
||||
requiredGroups: ["/Bidang Pelayanan Medik"],
|
||||
children: [
|
||||
{
|
||||
title: "Coba VueForm",
|
||||
to: "/coba",
|
||||
external: false,
|
||||
requiredGroups: ["/Bidang Pelayanan Medik"]
|
||||
},
|
||||
{
|
||||
title: "Coba VueForm2",
|
||||
to: "/coba2",
|
||||
external: false,
|
||||
requiredGroups: ["/Bidang Diklit/Staff"]
|
||||
},
|
||||
{
|
||||
title: "Homepage",
|
||||
@@ -68,6 +74,8 @@ const sidebarItem: menu[] = [
|
||||
title: "Typography",
|
||||
icon: "text-circle-outline",
|
||||
to: "/ui/typography",
|
||||
requiredGroups: ['/Instalasi Bedah Sentral', '/Instalasi Rawat Jalan'],
|
||||
|
||||
},
|
||||
{
|
||||
title: "Shadow",
|
||||
@@ -124,4 +132,7 @@ const sidebarItem: menu[] = [
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
export default sidebarItem;
|
||||
|
||||
Reference in New Issue
Block a user