Skip to content

Commit

Permalink
fix repeaters
Browse files Browse the repository at this point in the history
  • Loading branch information
@gheorghelupu17
gheorghelupu17 committed Oct 17, 2023
1 parent dc0a68d commit 9ad2205
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 186 deletions.
3 changes: 1 addition & 2 deletions app/Http/Resources/Project/EditProjectResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ public function toArray(Request $request): array
{
return [
'id' => $this->id,
// 'type' => $this->type,
'name' => $this->name,
'slug' => $this->slug,

Expand All @@ -40,7 +39,7 @@ public function toArray(Request $request): array
'reason_to_donate' => $this->reason_to_donate ?? '',
'accepting_volunteers' => $this->accepting_volunteers ? __('field.boolean.true') : __('field.boolean.false'),
'accepting_comments' => $this->accepting_comments ? __('field.boolean.true') : __('field.boolean.false'),
'videos' => '',
'videos' => $this->videos,
'external_links' => $this->external_links,
'counties' => $this->counties->pluck('id')->toArray(),
'counties_names' => $this->counties->pluck('name')->join(', '),
Expand Down
78 changes: 78 additions & 0 deletions resources/js/Components/RepeaterComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<template>
<div>
<div>
<p class="text-lg font-medium leading-5 text-gray-900" v-show="label" v-text="label"/>
<p class="text-sm leading-5 text-gray-700" v-show="description" v-text="description"/>
</div>
<div class="flex w-full border-t border-gray-300 pb-1.5" v-for="(item, index) in tmpElements" :key="index">
<template v-for="(struct, indexStruct) in structure">
<Input
class="w-1/3"
:label="$t(struct.label)"
color="gray-700"
type="text"
v-model="item[struct.key]"
:error = "struct.error"
/>

</template>

<DangerButton
class="mt-8 ml-4"
type="button"
hover="red-400"
color="white"
@click="() => {tmpElements.pop();}"
v-text="$t('remove')"
/>
</div>
<SecondaryButton
class="mt-8 ml-4"
hover="primary-400"
color="white"
@click="() => {tmpElements.push({ url: '' });}"
v-text="$t('add')"
/>

</div>
</template>
<script setup>
import {ref} from "vue";
import SecondaryButton from "@/Components/buttons/SecondaryButton.vue";
import DangerButton from "@/Components/buttons/DangerButton.vue";
import Input from "@/Components/form/Input.vue";
const props = defineProps({
elements: {
type: Array,
required: true,
},
error: {
type: String,
},
label: {
type: String,
default: null,
},
name: {
type: String,
required: true,
},
description: {
type: String,
default: null,
},
structure: {
type: Object,
required: true,
},
});
console.log(props.elements);
const tmpElements = ref(props.elements);
console.log(tmpElements.value);
</script>
8 changes: 7 additions & 1 deletion resources/js/Components/form/FileGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,10 @@
const files = ref(props.modelValue);
const previewImage = (e) => {
console.log(e.target.files);
Object.keys(e.target.files).forEach((key) => {
files.value.push(e.target.files[key]);
});
};
const removeImage = (index) => {
files.value.splice(index, 1);
Expand All @@ -89,6 +89,12 @@
if (typeof file === 'string') {
return file;
}
if (typeof file === 'object' && file instanceof File) {
return URL.createObjectURL(file);
}
if (typeof file === 'object' && file.url!==undefined) {
return file.url
}
return URL.createObjectURL(file);
}
Expand Down
103 changes: 21 additions & 82 deletions resources/js/Pages/AdminOng/Projects/AddProject.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,85 +142,27 @@
</label>

<FileGroup v-model="form.gallery" :label="$t('photo_gallery')" />
<div>
<p class="text-lg font-medium leading-5 text-gray-900">{{ $t('project.labels.videos') }}</p>
<p class="text-sm leading-5 text-gray-700">{{ $t('project.labels.videos_extra') }}</p>
</div>
<div>
<div class="flex w-full border-t border-gray-300 pb-1.5" v-for="(item, index) in videos" :key="index">
<Input
class="w-1/2"
:label="$t('video_link_label')"
color="gray-700"
type="text"
v-model="item.url"
:error = "arrayError('videos.'+index+'.url')"
/>
<DangerButton
class="mt-8 ml-4"
type="button"
hover="red-400"
color="white"
@click="() => {videos.pop();}"
v-text="$t('remove')"
/>
</div>
<SecondaryButton
class="mt-8 ml-4"
hover="primary-400"
color="white"
@click="() => {videos.push({ url: '' });}"
v-text="$t('add')"
/>

</div>
<RepeaterComponent
:elements="form.videos"
:label="$t('project.labels.videos')"
:description="$t('project.labels.videos_extra')"
:structure="[{label:$t('video_link_label'),key:'url',error:arrayError('videos.0.url')}]"
:error="arrayError('videos.0.url')"
name="videos"
/>
<div class="w-full border-t border-gray-300"></div>


<div>
<p class="text-lg font-medium leading-5 text-gray-900">{{ $t('external_links_title') }}</p>
<p class="text-sm leading-5 text-gray-700">{{ $t('external_links_text') }}</p>
</div>
<div>
<div class="flex w-full border-t border-gray-300" v-for="(item, index) in external_links" :key="index">
<Input
class="w-1/3"
:label="$t('project.labels.external_links_title')"
color="gray-700"
type="text"
:error = "arrayError('external_links.'+index+'.title')"
v-model="item.title"
/>
<Input
class="w-1/3 ml-1.5"
:label="$t('project.labels.external_links_url')"
color="gray-700"
icon="https://"
type="text"
:error = "arrayError('external_links.'+index+'.url')"
v-model="item.url"
/>
<DangerButton
class="mt-8 ml-4"
background="red-500"
hover="red-400"
color="white"
@click="() => external_links.pop()"
v-text="$t('remove')"
/>
</div>
<SecondaryButton
class="mt-8 ml-4"
hover="primary-400"
color="white"
@click="() => external_links.push({ url: '',title:'' })"
v-text="$t('add')"
/>
<div class="w-full border-t border-gray-300" />
</div>



<RepeaterComponent
:elements="form.external_links"
:label="$t('external_links_title')"
:description="$t('external_links_text')"
:structure="[
{label:$t('project.labels.external_links_title'),key:'title',error:arrayError('external_links.0.title')},
{label:$t('project.labels.external_links_url'),key:'url',error:arrayError('external_links.0.url')}
]"
name="external_links"
/>
<div class="flex items-center justify-end gap-6">
<SecondaryButton class="py-2.5">
{{ $t('cancel') }}
Expand All @@ -239,25 +181,22 @@

<script setup>
/** Import from inertia. */
import { useForm } from '@inertiajs/vue3';
import {useForm} from '@inertiajs/vue3';
/** Import components. */
import DashboardLayout from '@/Layouts/DashboardLayout.vue';
import Title from '@/Components/Title.vue';
import SvgLoader from '@/Components/SvgLoader.vue';
import Input from '@/Components/form/Input.vue';
import Select from '@/Components/form/Select.vue';
import Textarea from '@/Components/form/Textarea.vue';
import Checkbox from '@/Components/form/Checkbox.vue';
import FileGroup from '@/Components/form/FileGroup.vue';
import Repeater from '@/Components/form/Repeater.vue';
import InputWithIcon from '@/Components/form/InputWithIcon.vue';
import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
import DangerButton from '@/Components/buttons/DangerButton.vue';
import { ref } from 'vue';
import SelectMultiple from '@/Components/form/SelectMultiple.vue';
import {ref} from 'vue';
import FileInput from "@/Components/form/FileInput.vue";
import RepeaterComponent from "@/Components/RepeaterComponent.vue";
/** Initialize inertia from Object. */
const form = useForm({
Expand Down
Loading

0 comments on commit 9ad2205

Please sign in to comment.