Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add a post creation form #31

Open
wants to merge 14 commits into
base: mock-ui
Choose a base branch
from
Open

feat: add a post creation form #31

Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
54229d1
feat: create post add form
mwawrzen Feb 8, 2021
1f9f2d0
feat: add collection price form transition
mwawrzen Feb 8, 2021
d5a3335
feat: add image form
mwawrzen Feb 9, 2021
effafef
feat: add url input
mwawrzen Mar 3, 2021
60279a2
fix: change the path of the post creation form
Wuzado Mar 7, 2021
8104e02
fix(post-add): remove the hard boundaries for the description field
Wuzado Mar 8, 2021
194d5c6
fix(post-add): make the post form fit a bit better on mobile devices
Wuzado Mar 14, 2021
a54dfa2
fix(post-add): temporarily remove the amount of fundraising money
Wuzado Mar 14, 2021
b8b313d
feat(post-add): add the description limit
Wuzado Apr 2, 2021
fa25725
fix(post-add): change the wording of the post link in the add form
Wuzado Apr 2, 2021
d4c8024
fix(post-add): capitalize field labels
Wuzado Apr 2, 2021
e972b79
fix(post-add): remove the redundant style
Wuzado Apr 2, 2021
d9be81d
fix(post-add): change the wording of the title error message
Wuzado Apr 2, 2021
1cc32f3
feat(post-add): add the URL limit
Wuzado Apr 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions pages/add-post.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<template>
<v-row class="my-2" align="center" justify="center" style="height: 100%">
<v-col sm="8" md="8" lg="8" xl="6">
<v-card class="pa-10" elevation="2" outlined style="border-radius: 20px">
<v-card-title class="justify-center">Formularz ogłoszenia</v-card-title>
<v-radio-group v-model="type">
<template #label>
<div>Wybierz <strong>typ ogłoszenia</strong></div>
</template>
<v-divider class="mb-2"></v-divider>
<v-radio label="przedmiot" value="gift"></v-radio>
<v-radio label="zbiórka" value="fundraising"></v-radio>
</v-radio-group>
<v-expand-transition>
<v-slider
v-if="type == 'fundraising'"
v-model="price"
:min="minPrice"
:max="maxPrice"
></v-slider>
</v-expand-transition>
<v-expand-transition>
<v-text-field
v-if="type == 'fundraising'"
v-model="price"
label="cena"
:rules="priceRules"
suffix="zł"
outlined
dense
required
></v-text-field>
</v-expand-transition>
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field
v-model="url"
label="link do zbiórki"
outlined
dense
></v-text-field>
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
<v-text-field
v-model="title"
:counter="100"
:rules="titleRules"
label="tytuł"
outlined
dense
required
></v-text-field>
<v-textarea
v-model="desc"
label="opis"
height="300"
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
:rules="descRules"
no-resize
outlined
dense
required
></v-textarea>
<div class="d-sm-flex">
<v-file-input
v-model="files"
small-chips
multiple
label="zdjęcia"
max="2"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't seem that there is a limit for the images added.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If that's a limit on the amount of files sent, it seems to not work. Also, 2 images seem like a pretty low number. That's something to discuss, but I guess 5 (or even 10?) would be better?

></v-file-input>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can add multiple files only in the same dialogue: clicking the field again makes the files reset. You should also be able to discard the files separately, and not necessarily only as a whole. I assume this would most likely require us to build a more advanced mechanism for file input. That field also could use some kind of a preview, too.

<v-btn class="ml-8 mt-5" style="color: #eee; background: #5570d5">
dodaj
</v-btn>
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As of now, this button does nothing.

</div>
<v-btn
block
class="mt-5 green accent-3"
style="color: #eee"
:disabled="!valid"
@click="validate"
>
Opublikuj
</v-btn>
</v-form>
</v-card>
</v-col>
</v-row>
</template>

<script>
export default {
data() {
return {
type: 'gift',
price: 100,
minPrice: 100,
maxPrice: 100000,
url: '',
title: '',
desc: '',
files: [],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume this is dependent on the implementation on the backend, but I think this should be wrapped in an object, which is POSTed to the backend.

valid: true,
priceRules: [
(v) => !!v || 'Podaj wartość zbiórki',
(v) => !isNaN(Number(v)) || 'Podaj liczbę',
(v) => v >= this.minPrice || 'Cena jest zbyt niska',
(v) => v <= this.maxPrice || 'Cena jest zbyt wysoka',
],
titleRules: [
(v) => !!v || 'Uzupełnij puste pola',
(v) => v.length <= 100 || 'Tytuł nie spełnia wymagań',
],
descRules: [(v) => !!v || 'Uzupełnij puste pola'],
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
}
},
methods: {
async validate() {
await this.$refs.form.validate()
if (this.valid) alert('Pomyślnie opublikowano :)')
},
},
}
</script>

<style scoped>
.v-form,
Wuzado marked this conversation as resolved.
Show resolved Hide resolved
.container {
height: 100%;
}
.v-card__title {
text-transform: uppercase;
font-size: 20px;
letter-spacing: 1px;
color: #5570d5;
}
</style>