@vue-skuilder/platform-ui 0.1.1

package/src/views/Classrooms.vue

@@ -0,0 +1,258 @@
+<template>
+  <v-container fluid>
+    <v-row class="pa-4" justify="space-around">
+      <!-- Student Classes -->
+      <v-col v-if="studentClasses.length > 0" cols="12" sm="12" md="4">
+        <v-card>
+          <v-toolbar color="primary">
+            <v-toolbar-title>My Classes</v-toolbar-title>
+          </v-toolbar>
+
+          <v-list>
+            <transition-group name="component-fade" mode="out-in">
+              <v-list-item v-for="classroom in studentClasses" :key="classroom._id" :value="classroom">
+                <v-list-item-title>
+                  {{ classroom.name }}
+                </v-list-item-title>
+
+                <template #append>
+                  <v-btn
+                    size="small"
+                    color="secondary"
+                    :loading="spinnerMap[classroom._id] !== undefined"
+                    @click="leaveClass(classroom._id)"
+                  >
+                    Leave this class
+                  </v-btn>
+                </template>
+              </v-list-item>
+            </transition-group>
+          </v-list>
+        </v-card>
+      </v-col>
+
+      <!-- Teacher Classes -->
+      <v-col v-if="teacherClasses.length > 0" cols="12" sm="12" md="4">
+        <v-card>
+          <v-toolbar color="primary">
+            <v-toolbar-title>Classes I Manage</v-toolbar-title>
+          </v-toolbar>
+
+          <v-list>
+            <transition-group name="component-fade" mode="out-in">
+              <v-list-item v-for="classroom in teacherClasses" :key="classroom._id" :value="classroom">
+                <v-list-item-title>
+                  {{ classroom.name }}
+                </v-list-item-title>
+
+                <template #append>
+                  <v-btn
+                    size="small"
+                    color="secondary"
+                    :loading="spinnerMap[classroom._id] !== undefined"
+                    :to="`/classrooms/${classroom._id}`"
+                  >
+                    Open
+                  </v-btn>
+                </template>
+              </v-list-item>
+            </transition-group>
+          </v-list>
+        </v-card>
+      </v-col>
+
+      <!-- Empty State Message -->
+      <v-col v-if="studentClasses.length === 0 && teacherClasses.length === 0" class="text-h5 text-center">
+        You are not in any classes! Join your class below if someone has given you a joincode. Or else, start your own!
+      </v-col>
+    </v-row>
+
+    <v-divider class="my-4"></v-divider>
+
+    <!-- Join Class Form -->
+    <v-row class="pa-4">
+      <v-col cols="12" sm="12" md="8" lg="6" xl="6">
+        <v-card>
+          <v-toolbar color="primary">
+            <v-toolbar-title>Join a class</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text>
+            <v-text-field v-model="joinCode" label="Class Code" variant="outlined"></v-text-field>
+            <v-btn color="primary" @click="joinClass">Join</v-btn>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- New Class Dialog -->
+    <v-dialog v-model="newClassDialog" fullscreen transition="dialog-bottom-transition" :scrim="false">
+      <template #activator="{ props }">
+        <v-btn color="primary" v-bind="props">Start a new Class</v-btn>
+      </template>
+      <classroom-editor @classroom-editing-complete="processResponse" />
+    </v-dialog>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Status, ServerRequestType, JoinClassroom, LeaveClassroom, DeleteClassroom } from '@vue-skuilder/common';
+import { getDataLayer, UserDBInterface } from '@vue-skuilder/db';
+import serverRequest from '@/server/index';
+import { alertUser } from '@vue-skuilder/common-ui';
+import ClassroomEditor from '@/components/Classrooms/CreateClassroom.vue';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+
+interface CourseReg {
+  _id: string;
+  name: string;
+}
+
+export default defineComponent({
+  name: 'ClassroomsView',
+
+  components: {
+    ClassroomEditor,
+  },
+
+  beforeRouteEnter(to, from, next) {
+    // todo ?
+    // See https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation
+    // this.refreshData().then(() => {
+    //   next();
+    // });
+    next();
+  },
+
+  data() {
+    return {
+      classes: [] as string[],
+      joinCode: '',
+      studentClasses: [] as CourseReg[],
+      teacherClasses: [] as CourseReg[],
+      spinnerMap: {} as { [index: string]: boolean },
+      newClassDialog: false,
+      user: null as UserDBInterface | null,
+    };
+  },
+
+  created() {
+    this.refreshData();
+  },
+
+  methods: {
+    async refreshData() {
+      this.$data.user = await getCurrentUser();
+      const registrations = (await this.user!.getUserClassrooms()).registrations;
+      const studentClasses: CourseReg[] = [];
+      const teacherClasses: CourseReg[] = [];
+
+      registrations.forEach(async (reg) => {
+        const cfg = (
+          await getDataLayer().getClassroomDB(
+            reg.classID,
+            reg.registeredAs == 'teacher' || reg.registeredAs == 'student' ? reg.registeredAs : 'student'
+          )
+        ).getConfig();
+        console.log(`Registered class: ${JSON.stringify(cfg)}`);
+        const regItem = {
+          _id: reg.classID,
+          name: cfg.name,
+        };
+
+        if (reg.registeredAs === 'student') {
+          studentClasses.push(regItem);
+        } else if (reg.registeredAs === 'teacher') {
+          teacherClasses.push(regItem);
+        }
+      });
+
+      this.studentClasses = studentClasses;
+      this.teacherClasses = teacherClasses;
+    },
+
+    async deleteClass(classId: string) {
+      const result = await serverRequest<DeleteClassroom>({
+        type: ServerRequestType.DELETE_CLASSROOM,
+        user: this.user?.getUsername() || '',
+        classID: classId,
+        response: null,
+      });
+      if (result.response && result.response.ok) {
+        alertUser({
+          text: `Class deleted successfully.`,
+          status: Status.ok,
+        });
+      } else {
+        alertUser({
+          text: `Failed to delete class. Please try again.`,
+          status: Status.error,
+        });
+      }
+    },
+
+    async leaveClass(classID: string) {
+      this.spinnerMap[classID] = true;
+      console.log(`Attempting to drop class: ${classID}`);
+
+      const result = await serverRequest<LeaveClassroom>({
+        type: ServerRequestType.LEAVE_CLASSROOM,
+        data: {
+          classID: classID,
+        },
+        user: this.user?.getUsername() || '',
+        response: null,
+      });
+      if (result.response && result.response.ok) {
+        if (this.user) {
+          await this.user!.dropFromClassroom(classID);
+        }
+      }
+
+      delete this.spinnerMap[classID];
+      this.refreshData();
+    },
+
+    async joinClass() {
+      const result = await serverRequest<JoinClassroom>({
+        type: ServerRequestType.JOIN_CLASSROOM,
+        data: {
+          joinCode: this.joinCode,
+          registerAs: 'student',
+          user: this.user?.getUsername() || '',
+        },
+        user: this.user?.getUsername() || '',
+        response: null,
+      });
+
+      if (result.response && result.response.ok) {
+        console.log(`Adding registration to userDB...`);
+        if (this.user) {
+          await registerUserForClassroom(this.user.getUsername(), result.response!.id_course, 'student');
+          alertUser({
+            text: `Successfully joined class: ${result.response.course_name}.`,
+            status: Status.ok,
+          });
+        } else {
+          alertUser({
+            text: `Failed to join class. [Unknown current user.]`,
+            status: Status.error,
+          });
+        }
+      } else {
+        if (result.response) {
+          alertUser({
+            text: result.response.errorText!,
+            status: Status.error,
+          });
+        }
+      }
+      this.refreshData();
+    },
+
+    async processResponse() {
+      this.newClassDialog = !this.newClassDialog;
+    },
+  },
+});
+</script>

package/src/views/Courses.vue

@@ -0,0 +1,265 @@
+<template>
+  <v-container fluid>
+    <!-- Fixed Action Button - Updated position classes -->
+    <v-btn
+      color="primary"
+      fixed
+      location="bottom right"
+      icon="mdi-plus"
+      size="large"
+      class="mb-4 mr-4"
+      data-cy="create-course-fab"
+      v-bind="newCourseAttrs"
+      v-on="newCourseAttrs.on"
+    />
+
+    <!-- Main Content Area -->
+    <v-row>
+      <!-- My Quilts Panel -->
+      <v-col cols="12">
+        <v-expansion-panels v-model="myQuiltsPanel">
+          <v-expansion-panel>
+            <v-expansion-panel-title data-cy="registered-quilts-panel">My Registered Quilts</v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <v-row>
+                <v-col v-for="course in registeredCourses" :key="course.courseID" cols="12" sm="6" md="4" lg="3">
+                  <v-card variant="outlined" density="compact" class="pa-2">
+                    <div class="d-flex align-center justify-space-between">
+                      <div data-cy="registered-course" class="d-flex align-center">
+                        <router-link
+                          :to="`/q/${course.name.replaceAll(' ', '_')}`"
+                          class="text-subtitle-2"
+                          data-cy="registered-course-title"
+                        >
+                          {{ course.name }}
+                        </router-link>
+                        <v-icon v-if="!course.public" size="x-small" class="ml-1">mdi-eye-off</v-icon>
+                      </div>
+                      <v-btn
+                        size="x-small"
+                        variant="text"
+                        color="error"
+                        data-cy="drop-course-button"
+                        :loading="spinnerMap[course.courseID] !== undefined"
+                        @click="dropCourse(course.courseID)"
+                      >
+                        Drop
+                      </v-btn>
+                    </div>
+                  </v-card>
+                </v-col>
+              </v-row>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+
+      <!-- Available Quilts Section -->
+      <v-col cols="12" class="mt-4">
+        <h2 class="text-h5 mb-3">Available Quilts</h2>
+        <v-row>
+          <v-col v-for="course in displayedAvailableCourses" :key="course.courseID" cols="12" sm="6" md="4" lg="3">
+            <course-stub-card data-cy="available-course-card" :course-id="course.courseID" @refresh="refreshData" />
+          </v-col>
+        </v-row>
+
+        <!-- Show More Button -->
+        <v-row v-if="hasMoreCourses" justify="center" class="mt-2">
+          <v-btn variant="text" color="primary" data-cy="courses-show-more-button" @click="toggleShowMore">
+            {{ showAllCourses ? 'Show Less' : 'Show More' }}
+          </v-btn>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <!-- New Course Dialog -->
+    <v-dialog v-model="newCourseDialog" fullscreen transition="dialog-bottom-transition" :scrim="false">
+      <course-editor @course-editing-complete="processResponse()" />
+    </v-dialog>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CourseEditor from '@/components/Courses/CourseEditor.vue';
+import CourseStubCard from '@/components/Courses/CourseStubCard.vue';
+import _ from 'lodash';
+import serverRequest from '../server';
+import { ServerRequestType, CourseConfig, Status } from '@vue-skuilder/common';
+import { alertUser, getCurrentUser } from '@vue-skuilder/common-ui';
+import { UserDBInterface, getDataLayer } from '@vue-skuilder/db';
+
+type DBCourseConfig = CourseConfig & {
+  courseID: string;
+};
+
+export default defineComponent({
+  name: 'CoursesView',
+
+  components: {
+    CourseEditor,
+    CourseStubCard,
+  },
+
+  data() {
+    return {
+      existingCourses: [] as DBCourseConfig[],
+      registeredCourses: [] as DBCourseConfig[],
+      awaitingCreateCourse: false,
+      spinnerMap: {} as { [key: string]: boolean },
+      newCourseDialog: false,
+      user: null as UserDBInterface | null,
+      myQuiltsPanel: 0, // Controls expansion panel
+      showAllCourses: false,
+      coursesPerPage: 8,
+    };
+  },
+
+  computed: {
+    availableCourses(): DBCourseConfig[] {
+      const availableCourses = _.without(this.existingCourses, ...this.registeredCourses);
+      const user = this.user?.getUsername();
+
+      const viewableCourses = availableCourses.filter((course) => {
+        if (!user) {
+          return false;
+        }
+        const viewable: boolean =
+          course.public ||
+          course.creator === user ||
+          course.admins.indexOf(user) !== -1 ||
+          course.moderators.indexOf(user) !== -1;
+
+        return viewable;
+      });
+
+      return viewableCourses;
+    },
+    displayedAvailableCourses(): DBCourseConfig[] {
+      if (this.showAllCourses) {
+        return this.availableCourses;
+      }
+      return this.availableCourses.slice(0, this.coursesPerPage);
+    },
+
+    hasMoreCourses(): boolean {
+      return this.availableCourses.length > this.coursesPerPage;
+    },
+
+    newCourseAttrs() {
+      return {
+        attrs: {
+          'aria-label': 'Create new quilt',
+        },
+        on: {
+          click: () => (this.newCourseDialog = true),
+        },
+      };
+    },
+  },
+
+  async created() {
+    this.user = await getCurrentUser();
+    this.refreshData();
+  },
+
+  methods: {
+    processResponse(): void {
+      this.newCourseDialog = false;
+      this.refreshData();
+    },
+
+    toggleShowMore() {
+      this.showAllCourses = !this.showAllCourses;
+    },
+
+    async refreshData(): Promise<void> {
+      console.log(`Pulling user course data...`);
+      try {
+        const userCourseIDs = (await this.user!.getCourseRegistrationsDoc()).courses
+          .filter((c) => {
+            return c.status === 'active' || c.status === 'maintenance-mode' || c.status === undefined;
+          })
+          .map((c) => {
+            return c.courseID;
+          });
+        console.log(`userCourseIDs: ${userCourseIDs}`);
+
+        this.existingCourses = (await getDataLayer().getCoursesDB().getCourseList()) as DBCourseConfig[];
+        console.log(`existingCourses: \n\t${this.existingCourses.map((c) => c.name).join(',\n\t')}`);
+
+        this.registeredCourses = this.existingCourses.filter((course) => {
+          let match: boolean = false;
+          userCourseIDs.forEach((id: string) => {
+            if (course.courseID === id) {
+              match = true;
+            }
+          });
+          return match;
+        });
+      } catch (e) {
+        console.error(`Error refreshing course data:`, e);
+        alertUser({
+          status: Status.error,
+          text: `Failed to load courses: ${e || 'Database access error'}`,
+        });
+      }
+    },
+    async createCourse(): Promise<void> {
+      this.awaitingCreateCourse = true;
+      const resp = await serverRequest({
+        type: ServerRequestType.CREATE_COURSE,
+        data: {
+          name: 'testCourseName',
+          description: 'All of these courses will be the same!',
+          public: true,
+          deleted: false,
+          creator: this.user!.getUsername(),
+          admins: [this.user!.getUsername()],
+          moderators: [],
+          dataShapes: [],
+          questionTypes: [],
+        },
+        user: this.user!.getUsername(),
+        response: null,
+      });
+
+      alertUser({
+        status: resp.response!,
+        text: `Course ${JSON.stringify(resp)} created`,
+      });
+      this.awaitingCreateCourse = false;
+    },
+
+    async addCourse(course: string): Promise<void> {
+      this.spinnerMap[course] = true;
+      console.log(`Attempting to register for ${course}.`);
+      await this.user?.registerForCourse(course);
+      delete this.spinnerMap[course];
+      this.refreshData();
+    },
+
+    async dropCourse(course: string): Promise<void> {
+      this.spinnerMap[course] = true;
+      console.log(`Attempting to drop ${course}.`);
+      await this.user?.dropCourse(course);
+      delete this.spinnerMap[course];
+      this.refreshData();
+    },
+  },
+});
+</script>
+
+<style scoped>
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: all 0.65s ease;
+}
+.component-fade-enter,
+.component-fade-leave-to {
+  opacity: 0;
+}
+.componnent-fade-move {
+  transition: transform 1s;
+}
+</style>

package/src/views/Home.vue

@@ -0,0 +1,154 @@
+<template>
+  <v-container fluid class="fill-height">
+    <v-row align="center">
+      <v-col cols="12" class="text-left">
+        <h1 :class="{ 'text-h3': display.xs, 'text-h2': display.smAndUp }">
+          <span class="font-weight-thin">edu</span>
+          <span class="font-weight-bold">Quilt</span>
+        </h1>
+        <p class="text-h5">
+          <em>quilt</em>: (n) a <text-swap ref="swap1" :text="label" /> of
+          <text-swap ref="swap2" :text="adjective" /> courseware that <text-swap ref="swap3" :text="subject" /> can
+          <text-swap ref="swap4" :text="verb" />
+        </p>
+        <v-spacer class="my-12"></v-spacer>
+        <div class="text-subtitle-1">(get cozy)</div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import TextSwap from '@/components/TextSwap.vue';
+import { defineComponent } from 'vue';
+import { useDisplay } from 'vuetify';
+import { ITextSwap } from '@/components/TextSwap.vue';
+
+interface Data {
+  swapIntervalID: number | null;
+  label: string[];
+  adjective: string[];
+  subject: string[];
+  verb: string[];
+  swapsReady: boolean;
+}
+
+export default defineComponent({
+  name: 'HomeView',
+
+  components: {
+    TextSwap,
+  },
+
+  setup() {
+    const display = useDisplay();
+    return { display };
+  },
+
+  data(): Data {
+    return {
+      swapIntervalID: null,
+      label: ['collection', 'patchwork', 'network', 'jumble'],
+      adjective: ['interactive', 'adaptive', 'interlinked', 'intelligent'],
+      subject: ['anyone', 'everyone', 'you'],
+      verb: ['edit', 'start', 'study', 'improve'],
+      swapsReady: false,
+    };
+  },
+
+  computed: {
+    swaps(): ITextSwap[] {
+      return [
+        this.$refs.swap1 as ITextSwap,
+        this.$refs.swap2 as ITextSwap,
+        this.$refs.swap3 as ITextSwap,
+        this.$refs.swap4 as ITextSwap,
+      ];
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.swapsReady = true;
+      this.swapIntervalID = window.setInterval(this.randomSwap, 7000);
+    });
+  },
+
+  beforeUnmount() {
+    if (this.swapIntervalID !== null) {
+      clearInterval(this.swapIntervalID);
+      this.swapIntervalID = null;
+    }
+  },
+
+  methods: {
+    randomSwap(): void {
+      if (!this.swapsReady) return;
+
+      this.swaps.forEach((s) => {
+        if (Math.random() < 0.33) s.next();
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.section:first {
+  padding: 0px 0px 0px 0px;
+}
+.pitch {
+  padding: 50px 0px 0px 0px;
+}
+.section {
+  width: 100%;
+  transform: skewY(-4deg) !important;
+  padding: 200px 0px;
+  margin: 0px 0px;
+  background-color: transparent;
+}
+.section > * {
+  transform: skewY(4deg);
+}
+
+.step1 {
+  background-color: skyblue;
+}
+
+.step2 {
+  background-color: red;
+}
+
+.eduFade {
+  animation: fadein 2s;
+}
+
+.quiltedFade {
+  /* margin-top: 25px; */
+  /* font-size: 21px; */
+  /* text-align: center; */
+
+  animation: delayfadein 2s ease-in-out;
+}
+
+@keyframes delayfadein {
+  0% {
+    opacity: 0;
+  }
+  33% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>