From dc0a68d52f3b11c20a2509caddde38ac2f0872c9 Mon Sep 17 00:00:00 2001
From: Lupu Gheorghe <gheorghelupu17@gmail.com>
Date: Tue, 17 Oct 2023 15:44:30 +0300
Subject: [PATCH] finsh with edit project page

---
 app/Http/Requests/Project/StoreRequest.php    |   6 +-
 app/Services/ProjectService.php               |   7 +-
 lang/ro.json                                  |   8 +-
 lang/ro/validation.php                        |   5 +
 .../js/Pages/AdminOng/Projects/AddProject.vue | 223 +++++++++---------
 5 files changed, 136 insertions(+), 113 deletions(-)

diff --git a/app/Http/Requests/Project/StoreRequest.php b/app/Http/Requests/Project/StoreRequest.php
index 2c8d9bc5..8bb42f41 100644
--- a/app/Http/Requests/Project/StoreRequest.php
+++ b/app/Http/Requests/Project/StoreRequest.php
@@ -40,9 +40,11 @@ public function rules(): array
             'accepting_volunteers' => ['boolean', 'nullable'],
             'accepting_comments' => ['boolean', 'nullable'],
             'videos' => ['nullable', 'array'],
-            'videos.*' => ['nullable', 'url'],
+            'videos.*.url' => ['required', 'url'],
             'external_links' => ['nullable', 'array'],
-            'external_links.*' => ['nullable', 'url'],
+            'external_links.*.title' => ['required', 'string'],
+            'external_links.*.url' => ['required', 'url'],
+
             'is_national' => ['boolean', 'nullable'],
             'gallery' => ['array', 'nullable'],
             'gallery.*.file' => ['file', 'nullable'],
diff --git a/app/Services/ProjectService.php b/app/Services/ProjectService.php
index dd692594..a9eb2b0f 100644
--- a/app/Services/ProjectService.php
+++ b/app/Services/ProjectService.php
@@ -37,12 +37,10 @@ public function create(array $data): Project|RegionalProject
         if (! empty($data['counties'])) {
             $project->counties()->attach($data['counties']);
         }
-        if (!empty($data['preview']))
-        {
+        if (! empty($data['preview'])) {
             $project->addMedia($data['preview'])->toMediaCollection('preview');
         }
-        if (!empty($data['gallery']))
-        {
+        if (! empty($data['gallery'])) {
             collect($data['gallery'])->map(function ($image) use ($project) {
                 $project->addMedia($image)->toMediaCollection('gallery');
             });
@@ -109,6 +107,7 @@ public static function update(Project $project, array $attributes)
             'counties' => $project->counties()->sync($value),
             'categories' => $project->categories()->sync($value),
             'image' => $project->addMedia($value)->toMediaCollection('preview'),
+            'gallery' => collect($value)->map(fn ($image) => $project->addMedia($image)->toMediaCollection('gallery')),
 
             default => ($project->status === ProjectStatus::approved && \in_array($key, $project->requiresApproval))
                 ? $project->fill($attributes->all())->saveForApproval()
diff --git a/lang/ro.json b/lang/ro.json
index b5218dce..60269900 100644
--- a/lang/ro.json
+++ b/lang/ro.json
@@ -450,7 +450,13 @@
     "projects.status.starting_soon" : "Incepe in curand",
     "projects.status.ending_soon" : "Se incheie in curand",
 
-    "project.labels.preview_image": "Imagine de prezentare"
+    "project.labels.preview_image": "Imagine de prezentare",
+    "project.labels.videos" : "Videoclipuri externe ale proiectului",
+    "project.labels.videos_extra" : "Aici puteti adauga link-uri de pe diverse platforme de streaming (youtube, vimeo, etc.)",
+
+    "project.labels.external_links_title": "Titlu link extern",
+    "project.labels.external_links_url": "URL link extern"
+
 
 
 
diff --git a/lang/ro/validation.php b/lang/ro/validation.php
index 007b6f4c..85a43c97 100644
--- a/lang/ro/validation.php
+++ b/lang/ro/validation.php
@@ -223,5 +223,10 @@
         'categories' => 'Categorii',
         'counties' => 'Județe',
         'preview' => 'Imaginea principala',
+        'external_links.*.title' => 'Titlu link extern',
+        'external_links.*.url' => 'URL link extern',
+
+        'videos.*.url' => 'link video',
+
     ],
 ];
diff --git a/resources/js/Pages/AdminOng/Projects/AddProject.vue b/resources/js/Pages/AdminOng/Projects/AddProject.vue
index 1644125c..5ea8aa2e 100644
--- a/resources/js/Pages/AdminOng/Projects/AddProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/AddProject.vue
@@ -142,82 +142,84 @@
                 </label>
 
                 <FileGroup v-model="form.gallery" :label="$t('photo_gallery')" />
-
-                <div class="flex w-full border-t border-gray-300" v-for="(item, index) in projectLinks" :key="index">
-                    <InputWithIcon
-                        class="w-1/2"
-                        :label="$t('video_link_label')"
-                        color="gray-700"
-                        icon="https://"
-                        type="text"
-                        v-model="item.url"
-                    />
-                    <DangerButton
-                        v-if="index > 0"
-                        class="mt-8 ml-4"
-                        background="red-500"
-                        hover="red-400"
-                        color="white"
-                        @click="
-                            () => {
-                                projectLinks.pop();
-                            }
-                        "
-                    >
-                        {{ $t('remove') }}
-                    </DangerButton>
+                <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"
-                        background="primary-500"
                         hover="primary-400"
                         color="white"
-                        @click="
-                            () => {
-                                projectLinks.push({ url: '' });
-                            }
-                        "
-                    >
-                        {{ $t('add') }}
-                    </SecondaryButton>
-                </div>
+                        @click="() => {videos.push({ url: '' });}"
+                        v-text="$t('add')"
+                    />
 
+                </div>
                 <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 class="flex w-full border-t border-gray-300" v-for="(item, index) in projectArticles" :key="index">
-                    <InputWithIcon
-                        class="w-1/2"
-                        :label="$t('video_link_label')"
-                        color="gray-700"
-                        icon="https://"
-                        type="text"
-                        v-model="item.url"
-                    />
-                    <DangerButton
-                        v-if="index > 0"
-                        class="mt-8 ml-4"
-                        background="red-500"
-                        hover="red-400"
-                        color="white"
-                        @click="() => projectArticles.pop()"
-                    >
-                        {{ $t('remove') }}
-                    </DangerButton>
+                <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"
-                        background="primary-500"
                         hover="primary-400"
                         color="white"
-                        @click="() => projectArticles.push({ url: '' })"
-                    >
-                        {{ $t('add') }}
-                    </SecondaryButton>
+                        @click="() => external_links.push({ url: '',title:'' })"
+                        v-text="$t('add')"
+                    />
+                    <div class="w-full border-t border-gray-300" />
                 </div>
 
-                <div class="w-full border-t border-gray-300" />
+
 
                 <div class="flex items-center justify-end gap-6">
                     <SecondaryButton class="py-2.5">
@@ -236,54 +238,63 @@
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { useForm } from '@inertiajs/vue3';
+/** Import from inertia. */
+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 FileInput from "@/Components/form/FileInput.vue";
+/** 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 FileInput from "@/Components/form/FileInput.vue";
 
-    /** Initialize inertia from Object. */
-    const form = useForm({
-        name: '',
-        target_budget: '',
-        categories: [],
-        start: '',
-        end: '',
-        counties: [],
-        description: '',
-        scope: '',
-        beneficiaries: '',
-        reason_to_donate: '',
-        is_national: false,
-        accepting_comments: false,
-        accepting_volunteers: false,
-        preview: null,
-        gallery: [],
-        project_links: [{ url: '' }],
-        project_articles: [{ url: '' }],
-    });
-    const props = defineProps(['projectCategories', 'counties']);
-    /** Create project. */
-    const createProject = () => {
+/** Initialize inertia from Object. */
+const form = useForm({
+    name: '',
+    target_budget: '',
+    categories: [],
+    start: '',
+    end: '',
+    counties: [],
+    description: '',
+    scope: '',
+    beneficiaries: '',
+    reason_to_donate: '',
+    is_national: false,
+    accepting_comments: false,
+    accepting_volunteers: false,
+    preview: null,
+    gallery: [],
+    videos: [],
+    external_links: [],
+});
+const props = defineProps(['projectCategories', 'counties']);
+const  external_links = ref(form.external_links)
+const  videos = ref(form.videos)
+
+/** Create project. */
+const createProject = () => {
 
-        form.post(route('dashboard.projects.store'), {
-            preserveScroll: true,
-            onError: () => {},
-        });
-    };
+    form.post(route('dashboard.projects.store'), {
+        preserveScroll: true,
+        onError: () => {},
+    });
+};
+function arrayError(key) {
+    if (form.errors[key]) {
+        return form.errors[key];
+    }
+    return null;
+}
 </script>