Skip to content

Commit

Permalink
vuetify 1->2 migration
Browse files Browse the repository at this point in the history
  • Loading branch information
@NiloCK
NiloCK committed Jan 2, 2025
1 parent 73d0283 commit 519efb1
Show file tree
Hide file tree
Showing 20 changed files with 229 additions and 203 deletions.
10 changes: 8 additions & 2 deletions packages/vue/src/base-course/Components/AudioAutoPlayer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<template>
<v-btn v-on:click="play" large raised icon v-bind:class="playing ? 'primary lighten-3 playing' : 'primary'">
<v-icon>volume_up</v-icon>
<v-btn
@click="play"
large
icon
v-bind:color="playing ? 'primary lighten-3' : 'primary'"
:class="{ playing: playing }"
>
<v-icon>mdi-volume-high</v-icon>
</v-btn>
</template>

Expand Down
1 change: 1 addition & 0 deletions packages/vue/src/base-course/Components/MultipleChoiceOption.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default class MultipleChoiceOption extends Vue {
padding-bottom: 5px;
margin: 10px;
min-width: 75px; /* prevent tiny click-btns on, eg, one-letter answers */
transition: all 0.2s ease-in-out;
}
.selected {
Expand Down
84 changes: 50 additions & 34 deletions packages/vue/src/components/Courses/CourseCardBrowser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,60 +9,76 @@
v-on:prev="prev"
v-on:next="next"
v-on:last="last"
v-on:set-page="n => setPage(n)"
v-on:set-page="(n) => setPage(n)"
/>
<v-list v-for="c in cards" v-bind:key="c.id" v-bind:class="c.isOpen ? 'blue-grey lighten-5' : ''" two-line dense>
<v-list-tile v-bind:class="c.isOpen ? 'elevation-4 font-weight-black blue-grey lighten-4' : ''">
<v-list-tile-content>
<v-list-item v-bind:class="c.isOpen ? 'elevation-4 font-weight-black blue-grey lighten-4' : ''">
<v-list-item-content>
<template>
<v-list-tile-title v-bind:class="c.isOpen ? 'blue-grey--text text--lighten-4' : ''">
<v-list-item-title v-bind:class="c.isOpen ? 'blue-grey--text text--lighten-4' : ''">
{{ cardPreview[c.id] }}
</v-list-tile-title>
<v-list-tile-sub-title>
</v-list-item-title>
<v-list-item-subtitle>
{{ c.id.split('-').length === 3 ? c.id.split('-')[2] : '' }}
</v-list-tile-sub-title>
</v-list-item-subtitle>
</template>
</v-list-tile-content>
<!-- <v-list-tile-action> -->
</v-list-item-content>
<v-speed-dial v-model="c.isOpen" direction="left" transition="slide-x-reverse-transition">
<v-btn v-on:click="clearSelections(c.id)" slot="activator" color="disabled" icon fab small v-model="c.isOpen">
<v-icon disabled>open_in_full</v-icon>
<v-btn
v-if="c.isOpen"
v-on:click="clearSelections(c.id)"
slot="activator"
color="disabled"
icon
fab
small
v-model="c.isOpen"
>
<v-icon>close</v-icon>
</v-btn>
<v-btn
v-else
v-on:click="clearSelections(c.id)"
slot="activator"
color="disabled"
icon
fab
small
v-model="c.isOpen"
>
<v-icon>open_in_full</v-icon>
</v-btn>
<v-btn
fab
small
:outline="editMode != 'tags'"
:outlined="editMode != 'tags'"
:dark="editMode == 'tags'"
:color="editMode === 'tags' ? 'teal' : 'teal darken-3'"
@click.stop="editMode = 'tags'"
>
<v-icon>bookmark</v-icon>
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn
fab
small
:outline="editMode != 'flag'"
:outlined="editMode != 'flag'"
:dark="editMode == 'flag'"
:color="editMode === 'flag' ? 'error' : 'error darken-3'"
@click.stop="editMode = 'flag'"
>
<v-icon>flag</v-icon>
<v-icon>mdi-flag</v-icon>
</v-btn>
</v-speed-dial>
<!-- </v-list-tile-action> -->
</v-list-tile>
<!-- <transition name="component-scale" mode="out-in"> -->
</v-list-item>
<card-loader class="blue-grey lighten-5 elevation-1" v-if="c.isOpen" v-bind:qualified_id="c.id" />
<!-- </transition> -->
<tags-input
class="ma-3"
v-show="c.isOpen && editMode === 'tags'"
v-bind:courseID="_id"
v-bind:cardID="c.id.split('-')[1]"
/>
<div class="ma-3" v-show="c.isOpen && editMode === 'flag'">
<v-btn outline color="error" v-on:click="delBtn = true">Delete this card</v-btn>
<v-btn outlined color="error" v-on:click="delBtn = true">Delete this card</v-btn>
<span v-if="delBtn">
<span>Are you sure?</span>
<v-btn color="error" v-on:click="deleteCard(c.id)">Confirm</v-btn>
Expand All @@ -77,7 +93,7 @@
@prev="prev"
@next="next"
@last="last"
@set-page="n => setPage(n)"
@set-page="(n) => setPage(n)"
/>
</v-card>
</template>
Expand Down Expand Up @@ -140,7 +156,7 @@ export default class CourseCardBrowser extends SkldrVue {
private delBtn: boolean = false;
private clearSelections(exception: string = '') {
this.cards.forEach(card => {
this.cards.forEach((card) => {
if (card.id !== exception) {
card.isOpen = false;
}
Expand All @@ -152,7 +168,7 @@ export default class CourseCardBrowser extends SkldrVue {
private async deleteCard(c: string) {
const res = await this.courseDB.removeCard(c.split('-')[1]);
if (res.ok) {
this.cards = this.cards.filter(card => card.id != c);
this.cards = this.cards.filter((card) => card.id != c);
this.clearSelections();
}
}
Expand Down Expand Up @@ -189,7 +205,7 @@ export default class CourseCardBrowser extends SkldrVue {
private async populateTableData() {
if (this._tag) {
const tag = await getTag(this._id, this._tag);
this.cards = tag.taggedCards.map(c => {
this.cards = tag.taggedCards.map((c) => {
return { id: `${this._id}-${c}`, isOpen: false };
});
} else {
Expand All @@ -200,7 +216,7 @@ export default class CourseCardBrowser extends SkldrVue {
limit: 25,
page: this.page - 1, // -1 for 0-index offset
})
).map(c => {
).map((c) => {
return {
id: c,
isOpen: false,
Expand All @@ -212,13 +228,13 @@ export default class CourseCardBrowser extends SkldrVue {
const hydratedCardData = (
await getCourseDocs<CardData>(
this._id,
this.cards.map(c => c.id.split('-')[1]),
this.cards.map((c) => c.id.split('-')[1]),
{
include_docs: true,
}
)
).rows
.filter(r => {
.filter((r) => {
if (r.doc) {
return true;
} else {
Expand All @@ -228,30 +244,30 @@ export default class CourseCardBrowser extends SkldrVue {
return false;
}
})
.map(r => r.doc!);
.map((r) => r.doc!);
this.cards = this.cards.filter(c => !toRemove.includes(c.id.split('-')[1]));
this.cards = this.cards.filter((c) => !toRemove.includes(c.id.split('-')[1]));
hydratedCardData.forEach(c => {
hydratedCardData.forEach((c) => {
if (c && c.id_displayable_data) {
// this allowed display. still not finished
this.cardData[c._id] = c.id_displayable_data;
}
});
this.cards.forEach(async c => {
this.cards.forEach(async (c) => {
// this.log(`generating preview for ${c}`);
const _courseID: string = c.id.split('-')[0];
const _cardID: string = c.id.split('-')[1];
const tmpCardData = hydratedCardData.find(c => c._id == _cardID)!;
const tmpCardData = hydratedCardData.find((c) => c._id == _cardID)!;
// this.log(`tmpCardData: ${JSON.stringify(tmpCardData)}`);
const tmpView = Courses.getView(tmpCardData.id_view || 'default.question.BlanksCard.FillInView');
// todo 143 / perf: this fetch is non-blocking, but is making a db
// query for each card. much much better to batch query by allDocs
// with keys list
const tmpDataDocs = tmpCardData.id_displayable_data.map(id => {
const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
return getCourseDoc<DisplayableData>(_courseID, id, {
attachments: false,
binary: true,
Expand All @@ -260,7 +276,7 @@ export default class CourseCardBrowser extends SkldrVue {
const allDocs = await Promise.all(tmpDataDocs);
await Promise.all(
allDocs.map(doc => {
allDocs.map((doc) => {
const tmpData = [];
tmpData.unshift(displayableDataToViewData(doc));
Expand Down
82 changes: 40 additions & 42 deletions packages/vue/src/components/Courses/CourseEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,51 @@
<template>
<v-card>
<v-toolbar card dark flat color="primary">
<v-card-title class="title font-weight-regular" primary-title> Start a New Quilt </v-card-title>
<v-toolbar flat color="primary" dark>
<v-card-title class="text-h6 font-weight-regular"> Start a New Quilt </v-card-title>
<v-spacer></v-spacer>
<v-btn icon @click="clearFormAndDismiss">
<v-icon>close</v-icon>
</v-btn>
</v-toolbar>
<v-form>
<v-container grid-list-md>
<v-layout wrap column>
<v-flex xs12 sm6 md4>
<v-text-field
v-model="name"
counter="30"
:rules="nameRules"
label="Quilt Name"
required
hint="Short and descriptive"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-textarea
v-model="description"
outline
counter="300"
:auto-grow="true"
label="Quilt Description"
hint="Describe the course. What subject is covered? Who might be interested?"
>
</v-textarea>
</v-flex>
<v-flex xs12 sm6 md4>
<label for="">Public or private quilt?</label>
<v-radio-group
required
hint="Private quilts can be shared and collaborated on with other individual users, but will not be accessable without an invitation. A private quilt can be made public later."
persistent-hint
row
v-model="publicCourse"
>
<v-radio label="Public" :value="true"></v-radio>
<v-radio label="Private" :value="false"></v-radio>
</v-radio-group>
</v-flex>
<v-flex xs12 sm6 md4>
<v-btn :loading="updatePending" color="primary" @click="submit"> Save Course Changes </v-btn>
</v-flex>
</v-layout>
<v-container>
<v-row cols="12" sm="6" md="4">
<v-text-field
v-model="name"
counter="30"
:rules="nameRules"
label="Quilt Name"
required
hint="Short and descriptive"
></v-text-field>
</v-row>
<v-row cols="12" sm="6" md="4">
<v-textarea
v-model="description"
outlined
counter="300"
auto-grow
label="Quilt Description"
hint="Describe the course. What subject is covered? Who might be interested?"
>
</v-textarea>
</v-row>
<v-row cols="12" sm="6" md="4">
<label>Public or private quilt?</label>
<v-radio-group
required
hint="Private quilts can be shared and collaborated on with other individual users, but will not be accessable without an invitation. A private quilt can be made public later."
persistent-hint
row
v-model="publicCourse"
>
<v-radio label="Public" :value="true"></v-radio>
<v-radio label="Private" :value="false"></v-radio>
</v-radio-group>
</v-row>
<v-row cols="12" sm="6" md="4">
<v-btn :loading="updatePending" color="primary" @click="submit"> Save Course Changes </v-btn>
</v-row>
</v-container>
</v-form>
</v-card>
Expand Down
24 changes: 12 additions & 12 deletions packages/vue/src/components/Courses/CourseInformation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
<template>
<div v-if="!updatePending">
<h1 class="display-1"><router-link to="/q">Quilts</router-link> / {{ _courseConfig.name }}</h1>
<h1 class="text-h4"><router-link to="/q">Quilts</router-link> / {{ _courseConfig.name }}</h1>

<p class="body-2">
<p class="text-body-2">
{{ _courseConfig.description }}
</p>

<transition name="component-fade" mode="out-in">
<div v-if="userIsRegistered">
<router-link :to="`/study/${_id}`">
<router-link :to="`/study/${_id}`" class="mr-2">
<v-btn color="success">Start a study session</v-btn>
</router-link>
<router-link :to="`/edit/${_id}`">
<router-link :to="`/edit/${_id}`" class="mr-2">
<v-btn dark color="indigo lighten-1" title="Add content to this course">
<v-icon left>add</v-icon>
<v-icon left>mdi-plus</v-icon>
Add content
</v-btn>
</router-link>
<router-link :to="`/courses/${_id}/elo`">
<router-link :to="`/courses/${_id}/elo`" class="mr-2">
<v-btn dark color="green darken-2" title="Rank course content for difficulty">
<v-icon left>style</v-icon>
<v-icon left>mdi-format-list-numbered</v-icon>
Arrange
</v-btn>
</router-link>
<v-btn color="error" small outline @click="drop">Drop this course</v-btn>
<v-btn color="error" small outlined @click="drop">Drop this course</v-btn>
</div>
<div v-else>
<v-btn color="primary" @click="register">Register</v-btn>
<router-link :to="`/q/${_id}/preview`">
<v-btn outline color="primary">Start a trial study session</v-btn>
<v-btn outlined color="primary">Start a trial study session</v-btn>
</router-link>
</div>
</transition>
<midi-config v-if="isPianoCourse" :_id="_id" />

<v-card class="my-2">
<v-toolbar dense>
<v-app-bar dense>
<v-toolbar-title>Tags</v-toolbar-title>
<v-spacer></v-spacer>
{{ tags.length }}
</v-toolbar>
</v-app-bar>
<v-card-text>
<v-chip outline v-for="(tag, i) in tags" v-bind:key="i">
<v-chip outlined v-for="(tag, i) in tags" v-bind:key="i" class="mr-2 mb-2">
<!-- todo: -->
<!-- <router-link :to="`/q/${_courseConfig.name}/tags/${tag.name}`"> -->
<router-link :to="`/q/${_id}/tags/${tag.name}`">
Expand Down
6 changes: 3 additions & 3 deletions packages/vue/src/components/Courses/CourseStubCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<v-card v-if="!updatePending">
<v-toolbar dense flat>
<v-app-bar dense flat>
<v-toolbar-title @click="routeToCourse">
{{ _courseConfig.name }}
</v-toolbar-title>
<v-spacer></v-spacer>
<v-icon v-if="isPrivate">visibility_off</v-icon>
</v-toolbar>
<v-icon v-if="isPrivate">mdi-eye-off</v-icon>
</v-app-bar>
<v-card-text>
Questions: {{ questionCount }}

Expand Down
Loading

0 comments on commit 519efb1

Please sign in to comment.