Skip to content

Commit

Permalink
fix #85 (#94)
Browse files Browse the repository at this point in the history 
* fix #37, fix #39

* added cast for accept voluntiers

* fix email value issue

* fix #85
  • Loading branch information
@FlorinZarafu
FlorinZarafu committed Jul 21, 2023
1 parent b941660 commit ca31b93
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 60 deletions.
1 change: 1 addition & 0 deletions app/Models/Organization.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ class Organization extends Model implements HasMedia
'created_at' => 'datetime',
'updated_at' => 'datetime',
'deleted_at' => 'datetime',
'accepts_volunteers' => 'boolean'
];

protected $with = ['counties', 'activityDomains', 'projects', 'media'];
Expand Down
67 changes: 43 additions & 24 deletions resources/js/Components/form/FileInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,58 @@
<template>
<div>
<!-- Label -->
<label :for="id" :class="[`block text-sm font-medium leading-6 text-${color}`]">
<span v-if="label">{{ label }}</span>
<span v-else><slot /></span>
<div class="flex items-center gap-x-4">
<label
:for="id"
:class="['relative inline-flex text-gray-700 bg-white ring-inset ring-1 ring-gray-300 items-center justify-center px-4 py-2 text-sm font-medium border border-transparent rounded-md']">
<span>{{ label }}</span>
<input
:id="id"
type="file"
@change="handleFileChange"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</label>

<!-- Input -->
<input
class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
:value="modelValue"
type="file"
@input="$emit('update:modelValue', $event.target.value)"
/>
<img v-if="preview" :src="preview" alt="File Preview" class="object-cover w-24 h-24" />
<SvgLoader v-else name="avatar" class="w-24 h-24" />

<!-- Error -->
<p v-show="error" class="mt-2 text-sm text-red-600">{{ error }}</p>

<!-- Extra -->
<slot />
<pre>{{ form }}</pre>
</div>
</template>

<script setup>
/** Import from vue. */
import { ref } from 'vue';
/** Import Components. */
import SvgLoader from '@/Components/SvgLoader.vue';
/** Component props. */
const props = defineProps({
modelValue: {
type: String,
required: true,
},
label: String,
color: String,
error: String,
id: String,
form: Object
});
/** Image preview. */
const preview = ref('');
/** Component emits. */
defineEmits(['update:modelValue']);
const emit = defineEmits(['upload']);
/** Handle file change. */
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (() => preview.value = reader.result);
reader.readAsDataURL(file);
} else {
// If no file is selected, clear the previewUrl value
preview.value = '';
}
/** Emit file. */
emit('upload', file);
}
</script>
1 change: 0 additions & 1 deletion resources/js/Components/form/Input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
const props = defineProps({
modelValue: {
type: String,
required: true,
},
error: {
type: String,
Expand Down
62 changes: 27 additions & 35 deletions resources/js/Pages/AdminOng/Ong/EditOng.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,12 @@
@cancel="form.cif = clonedOrganization.cif"
class="flex justify-end col-span-1"
>
<FileInput
<Input
class="w-full"
:label="$t('cif_label')"
color="gray-700"
id="organizationcif"
type="text"
v-model="form.cif"
:error="form.errors.cif"
/>
Expand All @@ -79,15 +81,11 @@
@action="editField"
:text="$t('change_image_label')"
>
<Input
class="w-full"
:label="$t('organization_logo_label')"
color="gray-700"
id="organization-image"
@change="handleFileChange"
type="file"
<FileInput
:label="$t('upload_logo')"
@upload="handleFileChange"
:form="form.cover_image"
/>

</EditModal>

<ModalAction
Expand Down Expand Up @@ -134,10 +132,10 @@
@cancel="form.activity_domains = clonedOrganization.activity_domains"
class="flex justify-end col-span-1"
>

<MultiSelectObjectFilter
class="w-full"
<SelectMultiple
class="w-full z-101"
:label="$t('organization_activity_label')"
type="singleValue"
:options="activity_domains"
v-model="form.activity_domains"
:error="form.errors.activity_domains"
Expand Down Expand Up @@ -179,6 +177,7 @@
<div class="grid grid-cols-12 px-4 py-6 bg-gray-100">
<dt class="col-span-12 text-base font-medium leading-6 text-gray-700 md:col-span-5">{{ $t('organization_accepts_volunteers_label') }}</dt>
<dt class="col-span-12 text-base font-medium leading-6 text-gray-700 md:col-span-6">{{ clonedOrganization.accepts_volunteers ? $t('yes') : $t('no') }}</dt>

<EditModal
@action="editField"
@cancel="form.accepts_volunteers = clonedOrganization.accepts_volunteers"
Expand Down Expand Up @@ -254,7 +253,7 @@
<dt class="col-span-12 text-base font-medium leading-6 text-gray-700 md:col-span-6">{{ clonedOrganization.contact_email }}</dt>
<EditModal
@action="editField"
@cancel="form.email = clonedOrganization.contact_email"
@cancel="form.contact_email = clonedOrganization.contact_email"
class="flex justify-end col-span-1"
>
<Input
Expand All @@ -263,8 +262,8 @@
color="gray-700"
id="email"
type="email"
v-model="form.email"
:error="form.errors.email"
v-model="form.contact_email"
:error="form.errors.contact_email"
/>

</EditModal>
Expand All @@ -276,17 +275,17 @@
<dt class="col-span-12 text-base font-medium leading-6 text-gray-700 md:col-span-6">{{ clonedOrganization.contact_phone }}</dt>
<EditModal
@action="editField"
@cancel="form.phone = clonedOrganization.contact_phone"
@cancel="form.contact_phone = clonedOrganization.contact_phone"
class="flex justify-end col-span-1"
>
<Input
class="w-full"
:label="$t('organization_phone_label')"
color="gray-700"
id="phone"
type="number"
v-model="form.phone"
:error="form.errors.phone"
type="text"
v-model="form.contact_phone"
:error="form.errors.contact_phone"
/>

</EditModal>
Expand Down Expand Up @@ -323,13 +322,15 @@
@cancel="form.counties = clonedOrganization.counties; form.street_address = clonedOrganization.street_address"
class="flex justify-end col-span-1"
>
<div class="flex flex-col gap-4 lg:flex-row">

<MultiSelectObjectFilter
<div class="flex flex-col gap-4 lg:flex-row">
<SelectMultiple
class="w-full z-101"
:label="$t('county_label')"
:label="$t('counties_label')"
:options="counties"
type="object"
v-model="form.counties"
v-if="!form.is_national"
:error="form.errors.counties"
/>
</div>
Expand Down Expand Up @@ -416,13 +417,11 @@
import Alert from '@/Components/Alert.vue';
import EditModal from '@/Components/modals/EditModal.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 FileInput from '@/Components/form/FileInput.vue';
import ModalAction from '@/Components/modals/ModalAction.vue';
import MultiSelectObjectFilter from "@/Components/filters/MultiSelectObjectFilter.vue";
import {onMounted} from "vue";
import SelectMultiple from "@/Components/form/SelectMultiple.vue";

/** Page props. */
const props = defineProps({
Expand All @@ -434,24 +433,17 @@

/** Initialize inertia from Object. */
const form = useForm({ ...props.organization });
const clonedOrganization = ({...props.organization})
const clonedOrganization = ({...props.organization});

const editField = () => {
console.log(form);
form.put(route('admin.ong.update', form.id), {
preserveScroll: true,
onSuccess: () => {},
onError: () => {},
});
}
const handleFileChange = (event) => {
const file = event.target.files[0];

if (file) {
const reader = new FileReader();
reader.onload = (() => form.cover_image = reader.result);
reader.readAsDataURL(file);
}

const handleFileChange = (file) => {
form.cover_image = file;
}
</script>

0 comments on commit ca31b93

Please sign in to comment.