Skip to content

Commit

Permalink
Merge pull request #397 from NiloCK/bump-vuetify
Browse files Browse the repository at this point in the history 
bump vuetify
  • Loading branch information
@NiloCK
NiloCK authored Jan 2, 2025
2 parents 7829b03 + 3328632 commit b1ae5f0
Show file tree
Hide file tree
Showing 30 changed files with 452 additions and 371 deletions.
6 changes: 4 additions & 2 deletions packages/vue/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"vue-class-component": "^7.2.6",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.6.5",
"vuetify": "1.5.24",
"vuetify": "^2.7.2",
"@mdi/font": "^7.3.67",
"vuex": "^3.6.1",
"wavesurfer.js": "^5.1.0",
"webmidi": "^2.5.1"
Expand Down Expand Up @@ -83,7 +84,8 @@
"ts-jest": "^27.1.5",
"typescript": "~5.7.2",
"util": "^0.12.5",
"vue-cli-plugin-vuetify": "^0.2.0",
"vue-cli-plugin-vuetify": "^2.5.8",
"vuetify-loader": "^1.7.3",
"vue-template-compiler": "^2.7.16"
},
"engines": {
Expand Down
82 changes: 41 additions & 41 deletions packages/vue/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,70 @@
<!-- class="blue darken-2 grey--text text--lighten-5" dark> -->
<v-navigation-drawer clipped v-model="drawer" enable-resize-watcher fixed app>
<v-list>
<v-list-tile value="true" :to="{ path: '/home' }">
<v-list-tile-action>
<v-list-item value="true" :to="{ path: '/home' }">
<v-list-item-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title> Home </v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="true" value="true" :to="{ path: '/study' }">
<v-list-tile-action>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> Home </v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="true" value="true" :to="{ path: '/study' }">
<v-list-item-action>
<v-icon>school</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title> Study </v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="true" value="true" :to="{ path: '/classrooms' }">
<v-list-tile-action>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> Study </v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="true" value="true" :to="{ path: '/classrooms' }">
<v-list-item-action>
<v-icon>people</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title> Classrooms </v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-if="true" value="true" :to="{ path: '/quilts' }">
<v-list-tile-action>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> Classrooms </v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="true" value="true" :to="{ path: '/quilts' }">
<v-list-item-action>
<v-icon>bookmarks</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title> Quilts </v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<!-- <v-list-tile
</v-list-item-action>
<v-list-item-content>
<v-list-item-title> Quilts </v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- <v-list-item
v-if='true'
value="true"
:to="{path: '/edit'}"
>
<v-list-tile-action>
<v-list-item-action>
<v-icon>add_to_queue</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Edit
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile> -->
</v-list-item-title>
</v-list-item-content>
</v-list-item> -->
</v-list>
</v-navigation-drawer>
<v-toolbar app dense clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-app-bar app dense clipped-left>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<!-- <v-toolbar-title class="text-uppercase">
<span class="font-weight-thin grey--text text--darken-1">edu</span>
<span class="grey--text text--darken-2">Quilt</span>
</v-toolbar-title> -->
<v-spacer></v-spacer>
<user-login-and-registration-container />
</v-toolbar>
<v-content>
</v-app-bar>
<v-main>
<v-container>
<v-slide-y-transition mode="out-in">
<router-view v-if="$store.state._user" />
</v-slide-y-transition>
</v-container>
</v-content>
</v-main>
<!-- <v-footer fixed app>
<span>
v: <router-link to='/notes'>{{build}}</router-link>
Expand Down
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
Loading

0 comments on commit b1ae5f0

Please sign in to comment.