Merge pull request #148 from dikstub-rssa/feat/resume-81
Feat: UI Rehab Medik - Resume
This commit is contained in:
Munawwirul Jamal
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import type { LinkItem, ListItemDto } from './types'
|
||||
import { ActionEvents } from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: ListItemDto
|
||||
}>()
|
||||
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
const activeKey = ref<string | null>(null)
|
||||
const linkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Detail',
|
||||
onClick: () => {
|
||||
detail()
|
||||
},
|
||||
icon: 'i-lucide-eye',
|
||||
},
|
||||
{
|
||||
label: 'Verifikasi',
|
||||
onClick: () => {
|
||||
verify()
|
||||
},
|
||||
icon: 'i-lucide-check',
|
||||
},
|
||||
{
|
||||
label: 'Validasi',
|
||||
onClick: () => {
|
||||
validate()
|
||||
},
|
||||
icon: 'i-lucide-check-check',
|
||||
},
|
||||
{
|
||||
label: 'Print',
|
||||
onClick: () => {
|
||||
print()
|
||||
},
|
||||
icon: 'i-lucide-printer',
|
||||
},
|
||||
]
|
||||
|
||||
function detail() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showDetail
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function verify() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showVerify
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function validate() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showValidate
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function print() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showPrint
|
||||
recItem.value = props.rec
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-chevrons-up-down"
|
||||
class="ml-auto size-4"
|
||||
/>
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
|
||||
align="end"
|
||||
>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
v-for="item in linkItems"
|
||||
:key="item.label"
|
||||
class="hover:bg-gray-100 dark:hover:bg-slate-700"
|
||||
@click="item.onClick"
|
||||
@mouseenter="activeKey = item.label"
|
||||
@mouseleave="activeKey = null"
|
||||
>
|
||||
<Icon :name="item.icon ?? ''" />
|
||||
<span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -78,6 +78,9 @@ export const ActionEvents = {
|
||||
showEdit: 'showEdit',
|
||||
showDetail: 'showDetail',
|
||||
showProcess: 'showProcess',
|
||||
showVerify: 'showVerify',
|
||||
showValidate: 'showValidate',
|
||||
showPrint: 'showPrint',
|
||||
}
|
||||
|
||||
export interface DataTableLoader {
|
||||
|
||||
@@ -63,14 +63,14 @@ function handleInput(event: Event) {
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem :class="`relative`">
|
||||
<FormItem :class="cn(`relative`,)">
|
||||
<FormControl>
|
||||
<Input
|
||||
:disabled="isDisabled"
|
||||
v-bind="componentField"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxLength"
|
||||
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
|
||||
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="none"
|
||||
autocorrect="off"
|
||||
@@ -84,6 +84,6 @@ function handleInput(event: Event) {
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
<p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>
|
||||
<p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName: string
|
||||
placeholder: string
|
||||
label: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
colSpan?: number
|
||||
numericOnly?: boolean
|
||||
maxLength?: number
|
||||
isRequired?: boolean
|
||||
isDisabled?: boolean
|
||||
}>()
|
||||
|
||||
function handleInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
let value = target.value
|
||||
|
||||
// Filter numeric only jika diperlukan
|
||||
if (props.numericOnly) {
|
||||
value = value.replace(/\D/g, '')
|
||||
}
|
||||
|
||||
// Batasi panjang maksimal jika diperlukan
|
||||
if (props.maxLength && value.length > props.maxLength) {
|
||||
value = value.slice(0, props.maxLength)
|
||||
}
|
||||
|
||||
// Update value jika ada perubahan
|
||||
if (target.value !== value) {
|
||||
target.value = value
|
||||
// Trigger input event untuk update form
|
||||
target.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :col-span="colSpan || 1">
|
||||
<DE.Label
|
||||
class="mb-1"
|
||||
v-if="label !== ''"
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired && !isDisabled"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
:disabled="isDisabled"
|
||||
v-bind="componentField"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxLength"
|
||||
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="none"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, defineEmits, defineProps, onMounted, nextTick, defineExpose } from 'vue'
|
||||
import Input from '~/components/pub/ui/input/Input.vue';
|
||||
import Button from '~/components/pub/ui/button/Button.vue';
|
||||
import waveyFingerprint from '~/assets/svg/wavey-fingerprint.svg'
|
||||
|
||||
/**
|
||||
* TextCaptcha props:
|
||||
* - length: number of characters in the core captcha
|
||||
* - caseSensitive: whether validation is case sensitive
|
||||
* - useSpacing: show spaced-out characters (visual obfuscation only)
|
||||
* - noiseChars: include random noise characters visually (not required to type)
|
||||
*/
|
||||
const props = defineProps({
|
||||
length: { type: Number, default: 6 },
|
||||
caseSensitive: { type: Boolean, default: false },
|
||||
useSpacing: { type: Boolean, default: true },
|
||||
noiseChars: { type: Boolean, default: false }, // adds random noise characters to display
|
||||
refreshCooldownMs: { type: Number, default: 500 }, // guard repeated refresh
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:valid', valid: boolean): void
|
||||
(e: 'validated', valid: boolean): void
|
||||
(e: 'change', value: string): void
|
||||
}>()
|
||||
|
||||
// Internal state
|
||||
const raw = ref('') // the canonical captcha value (what user must match, ignoring visual noise)
|
||||
const display = ref('') // randomized visual representation (may include spacing/noise)
|
||||
const input = ref('') // user typed value
|
||||
const lastRefresh = ref(0)
|
||||
const valid = inject('isCaptchaValid') as Ref<boolean>
|
||||
const errorMessage = ref('')
|
||||
|
||||
/** Characters excluding ambiguous ones: 0/O, 1/l/I etc. */
|
||||
const CHARS = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'
|
||||
|
||||
function randomChar() {
|
||||
return CHARS.charAt(Math.floor(Math.random() * CHARS.length))
|
||||
}
|
||||
|
||||
/** Generate the canonical captcha string */
|
||||
function genRaw(len = props.length) {
|
||||
let s = ''
|
||||
for (let i = 0; i < len; i++) s += randomChar()
|
||||
return s
|
||||
}
|
||||
|
||||
/** Create a visually obfuscated display string (spacing, noise, random case) */
|
||||
function genDisplay(base: string) {
|
||||
const arr: string[] = []
|
||||
for (const ch of base) {
|
||||
// toggle case randomly (only for letters)
|
||||
const c = /[A-Za-z]/.test(ch) && Math.random() > 0.5 ? (Math.random() > 0.5 ? ch.toLowerCase() : ch.toUpperCase()) : ch
|
||||
arr.push(c)
|
||||
if (props.useSpacing && Math.random() > 0.3) arr.push(' ') // random space
|
||||
}
|
||||
return arr.join('')
|
||||
}
|
||||
|
||||
/** Refresh captcha */
|
||||
function refresh() {
|
||||
const now = Date.now()
|
||||
if (now - lastRefresh.value < props.refreshCooldownMs) return
|
||||
lastRefresh.value = now
|
||||
|
||||
raw.value = genRaw(props.length)
|
||||
display.value = genDisplay(raw.value)
|
||||
input.value = ''
|
||||
valid.value = false
|
||||
errorMessage.value = ''
|
||||
// emit change so parent knows new value (but we don't send the raw canonical in production)
|
||||
emit('change', display.value)
|
||||
}
|
||||
|
||||
/** Normalize input and canonical for comparison */
|
||||
function normalizeForCompare(s: string) {
|
||||
const normalized = s.replace(/\s+/g, '') // strip spaces
|
||||
return props.caseSensitive ? normalized : normalized.toLowerCase()
|
||||
}
|
||||
|
||||
/** Validate the current input */
|
||||
function validate() {
|
||||
const left = normalizeForCompare(input.value)
|
||||
const right = normalizeForCompare(raw.value)
|
||||
if (!input.value) {
|
||||
valid.value = false
|
||||
errorMessage.value = 'Please enter the captcha text.'
|
||||
} else if (left === right) {
|
||||
valid.value = true
|
||||
errorMessage.value = ''
|
||||
} else {
|
||||
valid.value = false
|
||||
errorMessage.value = 'Captcha does not match.'
|
||||
}
|
||||
emit('update:valid', valid.value)
|
||||
emit('validated', valid.value)
|
||||
return valid.value
|
||||
}
|
||||
|
||||
// expose a refresh method to parent via ref
|
||||
defineExpose({ refresh, validate, isValid: computed(() => valid.value) })
|
||||
|
||||
// generate on mount
|
||||
onMounted(() => refresh())
|
||||
|
||||
// // re-validate whenever input changes (lightweight)
|
||||
// watch(input, () => {
|
||||
// // we don't auto-pass until the user explicitly validate (but we can optionally live-validate)
|
||||
// // Here we perform live feedback but still emit validated only when called
|
||||
// const left = normalizeForCompare(input.value)
|
||||
// const right = normalizeForCompare(raw.value)
|
||||
// valid.value = !!input.value && left === right
|
||||
// // emit a live update so the parent can disable submit accordingly
|
||||
// emit('update:valid', valid.value)
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-2 w-full max-w-sm">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<!-- Captcha visual box -->
|
||||
<div
|
||||
role="img"
|
||||
aria-label="Text captcha, type the characters shown"
|
||||
tabindex="0"
|
||||
class="select-none p-3 rounded-md border border-gray-200 text-white text-xl font-mono tracking-wider text-center w-full"
|
||||
>
|
||||
<span class="inline-block" v-html="display"></span>
|
||||
</div>
|
||||
|
||||
<!-- Refresh -->
|
||||
<div class="flex-shrink-0">
|
||||
<Button variant="ghost" type="button" @click="refresh" title="Refresh captcha">
|
||||
<Icon name="i-lucide-refresh-cw" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="flex gap-3 items-start">
|
||||
<div class="flex-grow">
|
||||
<Input
|
||||
v-model="input"
|
||||
:aria-invalid="valid ? 'false' : 'true'"
|
||||
inputmode="text"
|
||||
placeholder="Type the captcha text"
|
||||
@keyup.enter="validate"
|
||||
/>
|
||||
<p v-if="errorMessage" class="text-xs text-red-500 mt-1">{{ errorMessage }}</p>
|
||||
<p v-else-if="valid" class="text-xs text-green-500 mt-1">Correct</p>
|
||||
<p v-else class="text-xs text-gray-500 mt-1">Not case-sensitive</p>
|
||||
</div>
|
||||
<Button variant="outline" type="button" @click="validate" title="Validate"
|
||||
class="border-orange-400">
|
||||
<Icon name="i-lucide-check" class="text-orange-400" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* small nicety: make noise/spaced display look irregular */
|
||||
div[role="img"] {
|
||||
background: url('~/assets/svg/wavey-fingerprint.svg') repeat center;
|
||||
}
|
||||
|
||||
div[role="img"] span {
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps<{
|
||||
link: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
// submit: [values: InstallationFormData, resetForm: () => void]
|
||||
// cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
// Form cancel handler
|
||||
// function onCancelForm({ resetForm }: { resetForm: () => void }) {
|
||||
// emit('cancel', resetForm)
|
||||
// }
|
||||
function onExternalLink() {
|
||||
navigateTo(props.link, {external: true,open: { target: "_blank" },});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
|
||||
Open in Browser
|
||||
<Icon name="i-lucide-external-link" class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
|
||||
<embed style="width: 100%; height: 100%" :src="props.link" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -30,8 +30,8 @@ function onClick(type: ClickType) {
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
|
||||
<div v-show="props.enableDraft">
|
||||
<Button variant="secondary" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" />
|
||||
Draft
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user