Comments (4)
The modal component like this
const page = usePage()
const form = useForm({
name: '',
parent_id: page.props.folder.id // assign folder.id to parent_id
})
from laravel-file-manager.
This check isn't working due to the ->where('parent_id', $this->parent_id)
clause which seems to not do what it should at this point (2h20) in the tutorial. You say you solved it at a point but no clue on how you did solve it.
Checking your files, I noticed there's some check on the current parent_id coming later on, so it is maybe related to that I suppose? But currently, it's not working as intended and it is frustrating as I don't understand why haha!
from laravel-file-manager.
Hi
use it like this with usePage
<script setup lang="ts">
import Modal from "@/Components/Modal.vue";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import {useForm, usePage} from "@inertiajs/vue3";
import InputError from "@/Components/InputError.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import SecondaryButton from "@/Components/SecondaryButton.vue";
import {nextTick, ref} from "vue";
const page = usePage()
const {modalValue} = defineProps<{ modalValue: Boolean }>()
const form = useForm({
name: '',
parent_id: page.props.folder.id
})
const folderInput = ref<any>()
const emit = defineEmits(['update:modelValue'])
const onShow = () => {
nextTick(() => folderInput.value.focus())
}
const submit = () => {
form.post(route('folders.create'), {
preserveScroll: true,
onSuccess: () => {
closeModal()
form.reset()
},
onError: () => folderInput.value.focus()
})
}
const closeModal = () => {
emit('update:modelValue', false)
form.clearErrors()
form.reset()
}
</script>
<template>
<modal :show="modalValue" max-width="sm" @hide="onHide" @show="onShow">
<div class="p-6">
<h2 class="text-lg font-medium text-gray-600">
Create Folder
</h2>
<div class="mt-6">
<InputLabel class="sr-only" for="folderName" value="Folder Name"/>
<TextInput
id="folderName"
ref="folderInput"
v-model="form.name"
:class="form.errors.name ? 'bg-red-500 focus:border-red-500 focus:ring-red-500':''"
class="mt-1 block w-full"
placeholder="New Folder ..."
required
type="text"
@keyup.enter="submit"
/>
<InputError :message="form.errors.name" class="mt-2"/>
<div class="flex mt-5 items-center justify-start space-x-1">
<PrimaryButton :class="{'opacity-25':form.processing}" :disable="form.processing" @click="submit">
Submit
</PrimaryButton>
<SecondaryButton @click.prevent="closeModal">
Cancel
</SecondaryButton>
</div>
</div>
</div>
</modal>
</template>
from laravel-file-manager.
Hi use it like this with
usePage
<script setup lang="ts"> import Modal from "@/Components/Modal.vue"; import InputLabel from "@/Components/InputLabel.vue"; import TextInput from "@/Components/TextInput.vue"; import {useForm, usePage} from "@inertiajs/vue3"; import InputError from "@/Components/InputError.vue"; import PrimaryButton from "@/Components/PrimaryButton.vue"; import SecondaryButton from "@/Components/SecondaryButton.vue"; import {nextTick, ref} from "vue"; const page = usePage() const {modalValue} = defineProps<{ modalValue: Boolean }>() const form = useForm({ name: '', parent_id: page.props.folder.id }) const folderInput = ref<any>() const emit = defineEmits(['update:modelValue']) const onShow = () => { nextTick(() => folderInput.value.focus()) } const submit = () => { form.post(route('folders.create'), { preserveScroll: true, onSuccess: () => { closeModal() form.reset() }, onError: () => folderInput.value.focus() }) } const closeModal = () => { emit('update:modelValue', false) form.clearErrors() form.reset() } </script> <template> <modal :show="modalValue" max-width="sm" @hide="onHide" @show="onShow"> <div class="p-6"> <h2 class="text-lg font-medium text-gray-600"> Create Folder </h2> <div class="mt-6"> <InputLabel class="sr-only" for="folderName" value="Folder Name"/> <TextInput id="folderName" ref="folderInput" v-model="form.name" :class="form.errors.name ? 'bg-red-500 focus:border-red-500 focus:ring-red-500':''" class="mt-1 block w-full" placeholder="New Folder ..." required type="text" @keyup.enter="submit" /> <InputError :message="form.errors.name" class="mt-2"/> <div class="flex mt-5 items-center justify-start space-x-1"> <PrimaryButton :class="{'opacity-25':form.processing}" :disable="form.processing" @click="submit"> Submit </PrimaryButton> <SecondaryButton @click.prevent="closeModal"> Cancel </SecondaryButton> </div> </div> </div> </modal> </template>
which file need to be modified with this?
from laravel-file-manager.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from laravel-file-manager.