Skip to content

Commit bae81e3

Browse files
sandragjacintosandragjacinto
committed
feat(tutor): initializes with mocked data
1 parent 0bfd293 commit bae81e3

File tree

9 files changed

+1816
-145
lines changed

9 files changed

+1816
-145
lines changed

‎src/components/tutor/FirstStep.vue‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ defineProps<{
55
}>();
66
const inputGroupLength = ref(1);
77
8+
// TODO: think of a vue way of doing this
89
const appendNewInputFile = () => {
910
const inputGroup = document.querySelector('.input-group');
1011
const div = document.createElement('div');
@@ -43,6 +44,35 @@ const removeLastInputFile = () => {
4344
<div class="wrapper" :class="{ disabled: disabled }">
4445
<h1 class="title is-4">{{ $t('tutor.firstStep.title') }}</h1>
4546
<p class="subtitle is-6">{{ $t('tutor.firstStep.description') }}</p>
47+
<div class="is-flex is-flex-wrap-wrap mb-4 descriptions">
48+
<div class="description">
49+
<label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
50+
<input
51+
class="input decription"
52+
type="text"
53+
id="cursus-title"
54+
:placeholder="$t('tutor.firstStep.cursusTitlePlaceholder')"
55+
/>
56+
</div>
57+
<div class="description">
58+
<label for="cursus-level">{{ $t('tutor.firstStep.cursusLevelLabel') }}</label>
59+
<input
60+
class="input decription"
61+
type="text"
62+
id="cursus-level"
63+
:placeholder="$t('tutor.firstStep.cursusLevelPlaceholder')"
64+
/>
65+
</div>
66+
<div class="description">
67+
<label for="cursus-duration">{{ $t('tutor.firstStep.cursusDurationLabel') }}</label>
68+
<input
69+
class="input decription"
70+
type="text"
71+
id="cursus-duration"
72+
:placeholder="$t('tutor.firstStep.cursusDurationPlaceholder')"
73+
/>
74+
</div>
75+
</div>
4676
<div>
4777
<div class="input-group is-flex is-flex-direction-column">
4878
<div class="is-flex is-flex-direction-row" id="first">
@@ -62,15 +92,24 @@ const removeLastInputFile = () => {
6292
display: flex;
6393
flex-direction: column;
6494
flex-grow: 0.25;
65-
flex-shrink: 1;
66-
flex-basis: 1;
67-
transition: all 2s;
95+
flex-shrink: 0.25;
96+
flex-basis: 30%;
97+
transition: all 1s;
6898
margin: 0 auto;
6999
}
70100
71101
.wrapper.disabled {
102+
flex-basis: 25%;
72103
opacity: 0.5;
73104
pointer-events: none;
74-
flex-grow: 0.5;
105+
flex-grow: 0.25;
106+
}
107+
108+
.description {
109+
width: calc((100% / 3) - (0.5rem * 2));
110+
}
111+
112+
.descriptions {
113+
gap: 0.5rem;
75114
}
76115
</style>

‎src/components/tutor/SecondStep.vue‎

Lines changed: 9 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,98 +2,25 @@
22
import { ref } from 'vue';
33
import { type Document } from '@/types';
44
import CardSimpleComponent from '@/components/CardSimpleComponent.vue';
5+
import data from './mockedSearchResult.json';
56
defineProps<{
67
disabled?: boolean;
78
visible?: boolean;
89
}>();
910
10-
const sources = ref<Document[]>([
11-
{
12-
id: 1,
13-
title: 'Document 1',
14-
description: 'This is the first document',
15-
selected: false,
16-
corpus: 'pubmed',
17-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
18-
details: {
19-
publisher: 'Elsevier',
20-
authors: ['John Doe', 'Jane Doe']
21-
}
22-
},
23-
{
24-
id: 2,
25-
title: 'Document 2',
26-
description: 'This is the second document',
27-
selected: false,
28-
corpus: 'pubmed',
29-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
30-
details: {
31-
publisher: 'Elsevier',
32-
authors: ['John Doe', 'Jane Doe']
33-
}
34-
},
35-
{
36-
id: 3,
37-
title: 'Document 3',
38-
description: 'This is the third document',
39-
selected: false,
40-
corpus: 'pubmed',
41-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
42-
details: {
43-
publisher: 'Elsevier',
44-
authors: ['John Doe', 'Jane Doe']
45-
}
46-
},
47-
{
48-
id: 4,
49-
title: 'Document 4',
50-
description: 'This is the third document',
51-
selected: false,
52-
corpus: 'pubmed',
53-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
54-
details: {
55-
publisher: 'Elsevier',
56-
authors: ['John Doe', 'Jane Doe']
57-
}
58-
},
59-
{
60-
id: 3,
61-
title: 'Document 3',
62-
description: 'This is the third document',
63-
selected: false,
64-
corpus: 'pubmed',
65-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
66-
details: {
67-
publisher: 'Elsevier',
68-
authors: ['John Doe', 'Jane Doe']
69-
}
70-
},
71-
{
72-
id: 4,
73-
title: 'Document 4',
74-
description: 'This is the third document',
75-
selected: false,
76-
corpus: 'pubmed',
77-
url: 'https://pubmed.ncbi.nlm.nih.gov/123456789/',
78-
details: {
79-
publisher: 'Elsevier',
80-
authors: ['John Doe', 'Jane Doe']
81-
}
82-
}
83-
]);
11+
const sources = ref<Document[]>(data);
8412
</script>
8513
<template>
8614
<div class="wrapper" :class="{ disabled: disabled, visible: visible }">
8715
<h1 class="title is-4">{{ $t('tutor.secondStep.title') }}</h1>
8816
<p class="subtitle is-6">{{ $t('tutor.secondStep.description') }}</p>
8917
<div class="sources">
9018
<div class="source" v-for="source in sources" :key="source.id">
91-
<input type="checkbox" v-model="source.selected" />
9219
<CardSimpleComponent
93-
:title="source.title"
94-
:corpus="source.corpus"
95-
:url="source.url"
96-
:details="source.details"
20+
:title="source.payload.document_title"
21+
:corpus="source.payload.document_corpus"
22+
:url="source.payload.document_url"
23+
:details="source.payload.document_details"
9724
/>
9825
</div>
9926
</div>
@@ -108,29 +35,28 @@ const sources = ref<Document[]>([
10835
flex-grow: 0;
10936
flex-basis: 0;
11037
height: 100%;
111-
transition: all 2s;
38+
transition: all 0.5s;
11239
margin-left: 2rem;
11340
overflow: hidden;
11441
}
11542
.wrapper.visible {
11643
flex-grow: 3;
11744
}
11845
.wrapper.disabled {
119-
pointer-events: none;
12046
opacity: 0.5;
12147
flex-grow: 1;
12248
margin-left: 0;
12349
margin-top: 1rem;
50+
transition: flex-grow 0s;
12451
}
12552
.source {
12653
display: flex;
12754
}
12855
.sources {
12956
overflow-y: auto;
130-
overflow-x: hidden;
13157
display: flex;
13258
flex-direction: column;
133-
max-height: 80%;
59+
height: 100%;
13460
width: 100%;
13561
}
13662
.sources > * {

‎src/components/tutor/StepsIndicator.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<script setup lang="ts">
2-
const props = defineProps({
3-
step: Number,
4-
stepsLength: Number
5-
});
2+
const props = defineProps<{ step: number; stepsLength: number; setStep: () => void }>();
63
74
const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i + 1);
85
</script>
@@ -12,7 +9,8 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
129
class="step-inidicator"
1310
v-for="i in stepsLengthArray"
1411
:key="i"
15-
:class="{ step: true, active: i === step }"
12+
:class="{ active: i === step, disabled: i > step }"
13+
@click="setStep(i)"
1614
>
1715
{{ i }}
1816
</p>
@@ -23,17 +21,21 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
2321
margin: 0 0.5rem;
2422
padding: 0 0.5rem;
2523
border-radius: 30%;
26-
background-color: #f0f0f0;
27-
color: #333;
24+
color: var(--neutral-90);
2825
font-size: 1.5rem;
2926
font-weight: bold;
3027
cursor: pointer;
3128
transition: background-color 0.3s;
3229
}
3330
3431
.step-inidicator.active {
35-
background-color: #333;
36-
color: #f0f0f0;
32+
background-color: var(--neutral-90);
33+
color: var(--neutral-10);
34+
}
35+
36+
.step-inidicator.disabled {
37+
pointer-events: none;
38+
color: var(--neutral-50);
3739
}
3840
3941
.is-flex {

‎src/components/tutor/ThirdStep.vue‎

Lines changed: 23 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,32 @@
11
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
import { marked } from 'marked';
4+
import axios from 'axios';
25
defineProps<{
36
visible?: boolean;
47
}>();
8+
const syllabus = ref('');
9+
10+
const setSyllabusValue = (text) => {
11+
syllabus.value = text;
12+
};
13+
14+
axios
15+
.get('./src/components/tutor/mockedSyllabus.md')
16+
.then((res) => setSyllabusValue(res.data))
17+
.catch((err) => console.log(err));
518
</script>
619
<template>
7-
<div class="wrapper" :class="{ visible: visible }">
20+
<div class="wrapper" :class="{ visible: visible && syllabus.length }">
821
<h1 class="title is-4">{{ $t('tutor.thirdStep.title') }}</h1>
922
<p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
1023
<!-- syllabus -->
11-
<p contenteditable="true" class="syllabus">
12-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies
13-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
14-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
15-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
16-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus Lorem ipsum dolor
17-
sit amet, consectetur adipiscing elit. Nullam nec purus Lorem ipsum dolor sit amet,
18-
consectetur adipiscing elit. Nullam nec purus Lorem ipsum dolor sit amet, consectetur
19-
adipiscing elit. Nullam nec purus Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20-
Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt.
21-
Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt.
22-
Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt.
23-
Nullam nec purus nec nunc ultricies nec nunc ultricies tincidunt. Nullam nec purus nec nunc
24-
ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc
25-
ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc
26-
ultricies tincidunt. Nullam nec purus nec nunc ultricies nec nunc ultricies tincidunt. Nullam
27-
nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam
28-
nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam
29-
nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies nec nunc ultricies
30-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
31-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
32-
tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies
33-
nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus
34-
nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus
35-
nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus
36-
nec nunc ultricies
37-
</p>
24+
<p
25+
contenteditable="true"
26+
class="syllabus content"
27+
v-if="syllabus.length"
28+
v-html="marked.parse(syllabus)"
29+
/>
3830
</div>
3931
</template>
4032

@@ -46,30 +38,21 @@ defineProps<{
4638
flex-direction: column;
4739
flex-grow: 0;
4840
flex-basis: 0;
49-
transition: flex-grow 2s;
41+
transition: flex-grow 0.3s;
5042
}
5143
5244
.wrapper.visible {
5345
flex-grow: 3;
5446
}
5547
5648
.syllabus {
57-
padding: 1rem;
49+
padding: 2rem;
5850
border: 1px solid var(--neutral-20);
5951
border-radius: 0.5rem;
60-
margin: 1rem 0;
6152
min-height: 10rem;
62-
width: 90%;
6353
overflow-y: auto;
64-
overflow-x: hidden;
65-
white-space: pre-wrap;
66-
word-wrap: break-word;
67-
word-break: break-all;
68-
font-size: 1rem;
69-
line-height: 1.5rem;
54+
overflow-x: auto;
7055
background-color: var(--neutral-10);
71-
color: var(--neutral-90);
7256
cursor: text;
73-
transition: background-color 0.3s;
7457
}
7558
</style>

0 commit comments

Comments
 (0)