Skip to content

Refactor LayoutStepper and all Screens #632

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

Merged
merged 1 commit into from
Aug 18, 2022
Merged

Refactor LayoutStepper and all Screens #632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 17 additions & 2 deletions src/components/LayoutStepper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,17 @@
id="middle"
class="row"
>
<router-view />
<Stepper />
<div
id="form"
class="col-12 col-lg-5 col-sm-10"
>
<router-view />

<div id="form-button-bar">
<StepperActions />
</div>
</div>
<div
id="preview-static"
class="col-12 col-lg-5 gt-md"
Expand All @@ -51,6 +61,7 @@
</div>
</q-page>
</q-page-container>

<q-footer id="footer-inner">
<Footer />
</q-footer>
Expand All @@ -64,6 +75,8 @@ import DownloadButton from 'components/DownloadButton.vue'
import Footer from 'components/Footer.vue'
import Header from 'components/Header.vue'
import Preview from 'components/Preview.vue'
import Stepper from 'components/Stepper.vue'
import StepperActions from 'components/StepperActions.vue'
import { useRoute } from 'vue-router'

export default defineComponent({
Expand All @@ -72,7 +85,9 @@ export default defineComponent({
Header,
Preview,
DownloadButton,
Footer
Footer,
Stepper,
StepperActions
},
setup () {
const isPreviewDrawerEnabled = ref(false)
Expand Down
59 changes: 22 additions & 37 deletions src/components/ScreenAbstract.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,38 @@
<template>
<Stepper />

<div
id="form"
class="col-12 col-lg-5 col-sm-10"
>
<div id="form-title">
<h1 class="page-title">
Abstract
</h1>
</div>

<div id="form-content">
<h2 class="question">
Please provide a description of the work
<SchemaGuideLink anchor="#abstract" />
</h2>
<q-input
autogrow
bg-color="white"
input-style="min-height: 100px; max-height: 444px"
label="abstract"
outlined
standout
type="textarea"
v-bind:model-value="abstract"
v-on:update:modelValue="setAbstract"
/>
</div>
<div id="form-title">
<h1 class="page-title">
Abstract
</h1>
</div>

<div id="form-button-bar">
<StepperActions />
</div>
<div id="form-content">
<h2 class="question">
Please provide a description of the work
<SchemaGuideLink anchor="#abstract" />
</h2>
<q-input
autogrow
bg-color="white"
input-style="min-height: 100px; max-height: 444px"
label="abstract"
outlined
standout
type="textarea"
v-bind:model-value="abstract"
v-on:update:modelValue="setAbstract"
/>
</div>
</template>

<script lang="ts">
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
import Stepper from 'components/Stepper.vue'
import StepperActions from 'components/StepperActions.vue'
import { defineComponent } from 'vue'
import { useCff } from 'src/store/cff'

export default defineComponent({
name: 'ScreenAbstract',
components: {
SchemaGuideLink,
Stepper,
StepperActions
SchemaGuideLink
},
setup () {
const { abstract, setAbstract } = useCff()
Expand Down
120 changes: 53 additions & 67 deletions src/components/ScreenAuthors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,64 @@
<template>
<Stepper />
<div
id="form"
class="col-12 col-lg-5 col-sm-10"
>
<div id="form-title">
<h1 class="page-title">
Authors
</h1>
</div>

<div id="form-content">
<h2 class="question">
Who are the author(s) of the work?
<SchemaGuideLink anchor="#authors" />
</h2>
<div class="scroll-to-bottom-container">
<span class="bottom" />
<div>
<div
class="q-mb-md q-mr-lg"
v-bind:key="index"
v-for="(author, index) in authors"
>
<AuthorCardViewing
v-if="editingId !== index"
v-bind:index="index"
v-bind:author="author"
v-bind:num-authors="authors.length"
v-on:editPressed="() => (editingId = index)"
v-on:moveDown="moveAuthorDown(index)"
v-on:moveUp="moveAuthorUp(index)"
/>
<AuthorCardEditing
v-else
v-bind:index="index"
v-bind="author"
v-on:update="setAuthorField"
v-on:closePressed="() => (editingId = -1)"
v-on:removePressed="removeAuthor"
/>
</div>
</div>
</div>

<q-btn
class="q-mt-md q-mb-md"
color="primary"
no-caps
v-on:click="addAuthor"
>
Add author
</q-btn>
<div id="form-title">
<h1 class="page-title">
Authors
</h1>
</div>

<q-banner
v-if="authorsErrors.length > 0"
v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
>
<div id="form-content">
<h2 class="question">
Who are the author(s) of the work?
<SchemaGuideLink anchor="#authors" />
</h2>
<div class="scroll-to-bottom-container">
<span class="bottom" />
<div>
<div
class="q-mb-md q-mr-lg"
v-bind:key="index"
v-for="(screenMessage, index) in authorsErrors"
v-for="(author, index) in authors"
>
{{ screenMessage }}
<AuthorCardViewing
v-if="editingId !== index"
v-bind:index="index"
v-bind:author="author"
v-bind:num-authors="authors.length"
v-on:editPressed="() => (editingId = index)"
v-on:moveDown="moveAuthorDown(index)"
v-on:moveUp="moveAuthorUp(index)"
/>
<AuthorCardEditing
v-else
v-bind:index="index"
v-bind="author"
v-on:update="setAuthorField"
v-on:closePressed="() => (editingId = -1)"
v-on:removePressed="removeAuthor"
/>
</div>
</q-banner>
</div>
</div>

<div id="form-button-bar">
<StepperActions />
</div>
<q-btn
class="q-mt-md q-mb-md"
color="primary"
no-caps
v-on:click="addAuthor"
>
Add author
</q-btn>

<q-banner
v-if="authorsErrors.length > 0"
v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
>
<div
v-bind:key="index"
v-for="(screenMessage, index) in authorsErrors"
>
{{ screenMessage }}
</div>
</q-banner>
</div>
</template>

Expand All @@ -80,8 +70,6 @@ import AuthorCardEditing from 'components/AuthorCardEditing.vue'
import AuthorCardViewing from 'components/AuthorCardViewing.vue'
import { AuthorType } from 'src/types'
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
import Stepper from 'components/Stepper.vue'
import StepperActions from 'components/StepperActions.vue'
import { scrollToBottom } from 'src/scroll-to-bottom'
import { useCff } from 'src/store/cff'
import { useStepperErrors } from 'src/store/stepper-errors'
Expand All @@ -91,8 +79,6 @@ export default defineComponent({
name: 'ScreenAuthors',
components: {
SchemaGuideLink,
Stepper,
StepperActions,
AuthorCardEditing,
AuthorCardViewing
},
Expand Down
90 changes: 38 additions & 52 deletions src/components/ScreenFinishAdvanced.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,51 @@
<template>
<Stepper />
<div
id="form"
class="col-12 col-lg-5 col-sm-10"
>
<div id="form-title">
<h1
class="finish-title"
v-if="isValidCFF"
>
Congratulations
</h1>
<h1
class="finish-title"
v-else
>
Uh-oh!
</h1>
</div>
<div id="form-title">
<h1
class="finish-title"
v-if="isValidCFF"
>
Congratulations
</h1>
<h1
class="finish-title"
v-else
>
Uh-oh!
</h1>
</div>

<div id="form-content">
<div v-if="isValidCFF">
<p class="finish-paragraph">
Use the buttons below to download your CITATION.cff file, or reset the form to start over.
</p>
<p class="finish-paragraph">
Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
</p>
<div class="row">
<q-btn
class="col-4 q-ma-lg"
color="primary"
icon="refresh"
label="Reset form"
no-caps
size="xl"
v-on:click="createAnother"
/>
<DownloadButton class="col-4 q-ma-lg" />
</div>
</div>
<div v-else>
<p class="finish-paragraph">
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
</p>
<div id="form-content">
<div v-if="isValidCFF">
<p class="finish-paragraph">
Use the buttons below to download your CITATION.cff file, or reset the form to start over.
</p>
<p class="finish-paragraph">
Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
</p>
<div class="row">
<q-btn
class="col-4 q-ma-lg"
color="primary"
icon="refresh"
label="Reset form"
no-caps
size="xl"
v-on:click="createAnother"
/>
<DownloadButton class="col-4 q-ma-lg" />
</div>
</div>

<div id="form-button-bar">
<StepperActions />
<div v-else>
<p class="finish-paragraph">
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
</p>
</div>
</div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import DownloadButton from 'components/DownloadButton.vue'
import Stepper from 'components/Stepper.vue'
import StepperActions from 'components/StepperActions.vue'
import { useApp } from 'src/store/app'
import { useCff } from 'src/store/cff'
import { useStepperErrors } from 'src/store/stepper-errors'
Expand All @@ -66,9 +54,7 @@ import { useValidation } from 'src/store/validation'
export default defineComponent({
name: 'ScreenFinishAdvanced',
components: {
DownloadButton,
Stepper,
StepperActions
DownloadButton
},
setup () {
const { setStepName, setShowAdvanced } = useApp()
Expand Down
Loading