Resolve #22: Add description field to event, open a popover when clic…

…king event chip
cubing · May 20, 2021 · 5c56f44 · 5c56f44
1 parent 57bb2f8
commit 5c56f44
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 102 deletions.
diff --git a/backend/functions/db/migrations/20210519173300_add_event_description.ts b/backend/functions/db/migrations/20210519173300_add_event_description.ts
@@ -0,0 +1,13 @@
+import * as Knex from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+  return knex.schema.alterTable("event", function (t) {
+    t.text("description").nullable();
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  return knex.schema.alterTable("event", function (t) {
+    t.dropColumn("description");
+  });
+}
diff --git a/backend/functions/migration.ts b/backend/functions/migration.ts
@@ -2,98 +2,19 @@ import * as Knex from "knex";
 
 export async function up(knex: Knex): Promise<void[]> {
   return Promise.all([
-    knex.schema.createTable("userUserFollowLink", function (table) {
-      table.increments();
-      table.integer("user").notNullable();
-      table.integer("target").notNullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-      table.unique(["user", "target"]);
-    }),
-    knex.schema.createTable("user", function (table) {
-      table.increments();
-      table.string("provider").notNullable();
-      table.string("provider_id").notNullable();
-      table.string("wca_id").nullable();
-      table.string("email").notNullable().unique();
-      table.string("name").notNullable();
-      table.string("avatar").nullable();
-      table.string("country").nullable();
-      table.boolean("is_public").notNullable().defaultTo(true);
-      table.boolean("is_featured").notNullable().defaultTo(false);
-      table.integer("role").notNullable().defaultTo(2);
-      table.json("permissions").nullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-      table.unique(["provider", "provider_id"]);
-    }),
-    knex.schema.createTable("event", function (table) {
-      table.increments();
-      table.string("name").notNullable();
-      table.string("code").notNullable().unique();
-      table.string("cubing_icon").nullable();
-      table.string("score_method").notNullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-    }),
-    knex.schema.createTable("product", function (table) {
-      table.increments();
-      table.string("name").notNullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-    }),
-    knex.schema.createTable("personalBestClass", function (table) {
-      table.increments();
-      table.string("name").notNullable();
-      table.text("description").nullable();
-      table.integer("set_size").nullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-    }),
-    knex.schema.createTable("personalBest", function (table) {
-      table.increments();
-      table.integer("pb_class").notNullable();
-      table.integer("event").notNullable();
-      table.integer("set_size").notNullable();
-      table.integer("score").notNullable();
-      table.integer("attempts_succeeded").nullable();
-      table.integer("attempts_total").nullable();
-      table.integer("product").nullable();
-      table.dateTime("happened_on").nullable();
-      table.integer("time_elapsed").nullable();
-      table.decimal("moves_count").nullable();
-      table.boolean("is_current").notNullable();
-      table.text("public_comments").nullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-    }),
-    knex.schema.createTable("apiKey", function (table) {
-      table.increments();
-      table.string("name").notNullable();
-      table.string("code").notNullable().unique();
-      table.integer("user").notNullable();
-      table.json("permissions").nullable();
-      table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());
-      table.dateTime("updated_at").nullable();
-      table.integer("created_by").notNullable();
-    }),
-  ]);
+    knex.schema.createTable("userUserFollowLink", function (table) { table.increments();table.integer("user").notNullable();table.integer("target").notNullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable();table.unique(["user","target"]); }),
+knex.schema.createTable("user", function (table) { table.increments();table.string("provider").notNullable();table.string("provider_id").notNullable();table.string("wca_id").nullable();table.string("email").notNullable().unique();table.string("name").notNullable();table.string("avatar").nullable();table.string("country").nullable();table.boolean("is_public").notNullable().defaultTo(true);table.boolean("is_featured").notNullable().defaultTo(false);table.integer("role").notNullable().defaultTo(2);table.json("permissions").nullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable();table.unique(["provider","provider_id"]); }),
+knex.schema.createTable("event", function (table) { table.increments();table.string("name").notNullable();table.text("description").nullable();table.string("code").notNullable().unique();table.string("cubing_icon").nullable();table.string("score_method").notNullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable(); }),
+knex.schema.createTable("product", function (table) { table.increments();table.string("name").notNullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable(); }),
+knex.schema.createTable("personalBestClass", function (table) { table.increments();table.string("name").notNullable();table.text("description").nullable();table.integer("set_size").nullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable(); }),
+knex.schema.createTable("personalBest", function (table) { table.increments();table.integer("pb_class").notNullable();table.integer("event").notNullable();table.integer("set_size").notNullable();table.integer("score").notNullable();table.integer("attempts_succeeded").nullable();table.integer("attempts_total").nullable();table.integer("product").nullable();table.dateTime("happened_on").notNullable().defaultTo(knex.fn.now());table.integer("time_elapsed").nullable();table.decimal("moves_count").nullable();table.boolean("is_current").notNullable();table.text("public_comments").nullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable(); }),
+knex.schema.createTable("apiKey", function (table) { table.increments();table.string("name").notNullable();table.string("code").notNullable().unique();table.integer("user").notNullable();table.json("permissions").nullable();table.dateTime("created_at").notNullable().defaultTo(knex.fn.now());table.dateTime("updated_at").nullable();table.integer("created_by").notNullable(); }),
+
+  ])
 }
 
 export async function down(knex: Knex): Promise<void[]> {
   return Promise.all([
-    knex.schema.dropTable("userUserFollowLink"),
-    knex.schema.dropTable("user"),
-    knex.schema.dropTable("event"),
-    knex.schema.dropTable("product"),
-    knex.schema.dropTable("personalBestClass"),
-    knex.schema.dropTable("personalBest"),
-    knex.schema.dropTable("apiKey"),
+    knex.schema.dropTable("userUserFollowLink"),knex.schema.dropTable("user"),knex.schema.dropTable("event"),knex.schema.dropTable("product"),knex.schema.dropTable("personalBestClass"),knex.schema.dropTable("personalBest"),knex.schema.dropTable("apiKey")
   ]);
 }
diff --git a/backend/functions/schema.ts b/backend/functions/schema.ts
@@ -1,6 +1,7 @@
 // Query builder (Typescript version >= 4.1.3 required)
 /* const queryResult = executeGiraffeql({
   // Start typing here to get hints
+  
 }); */
 
 export function executeGiraffeql<Key extends keyof Root>(
@@ -214,12 +215,14 @@ export type FilterByField<T> = {
   };
   createEvent: {
     name: Scalars["string"];
+    description?: Scalars["string"] | null;
     code: Scalars["string"];
     cubingIcon?: Scalars["string"] | null;
     scoreMethod: Scalars["scoreMethod"];
   };
   updateEventFields: {
     name?: Scalars["string"];
+    description?: Scalars["string"] | null;
     code?: Scalars["string"];
     cubingIcon?: Scalars["string"] | null;
     scoreMethod?: Scalars["scoreMethod"];
@@ -330,7 +333,7 @@ export type FilterByField<T> = {
     attemptsSucceeded?: Scalars["number"] | null;
     attemptsTotal?: Scalars["number"] | null;
     product?: InputTypes["product"] | null;
-    happenedOn?: Scalars["unixTimestamp"] | null;
+    happenedOn?: Scalars["unixTimestamp"];
     timeElapsed?: Scalars["number"] | null;
     movesCount?: Scalars["number"] | null;
     publicComments?: Scalars["string"] | null;
@@ -342,7 +345,7 @@ export type FilterByField<T> = {
     attemptsSucceeded?: Scalars["number"] | null;
     attemptsTotal?: Scalars["number"] | null;
     product?: InputTypes["product"] | null;
-    happenedOn?: Scalars["unixTimestamp"] | null;
+    happenedOn?: Scalars["unixTimestamp"];
     timeElapsed?: Scalars["number"] | null;
     movesCount?: Scalars["number"] | null;
     publicComments?: Scalars["string"] | null;
@@ -622,6 +625,7 @@ export type UserUserFollowLinkEdge = Edge<UserUserFollowLink>;
     Args: [Scalars["number"]];
   };
   name: { Type: Scalars["string"]; Args: undefined };
+  description: { Type: Scalars["string"] | null; Args: undefined };
   code: { Type: Scalars["string"]; Args: undefined };
   cubingIcon: { Type: Scalars["string"] | null; Args: undefined };
   scoreMethod: { Type: Scalars["scoreMethod"]; Args: undefined };
@@ -690,7 +694,7 @@ export type UserUserFollowLinkEdge = Edge<UserUserFollowLink>;
     Args: undefined;
   };
   product: { Type: Product | null; Args: undefined };
-  happenedOn: { Type: Scalars["unixTimestamp"] | null; Args: undefined };
+  happenedOn: { Type: Scalars["unixTimestamp"]; Args: undefined };
   /**The amount of ms time elapsed for the pb attempt*/ timeElapsed: {
     Type: Scalars["number"] | null;
     Args: undefined;

diff --git a/backend/functions/src/schema/models/event/typeDef.ts b/backend/functions/src/schema/models/event/typeDef.ts
@@ -8,6 +8,7 @@ import {
   generateStringField,
   generateTypenameField,
   generateEnumField,
+  generateTextField,
 } from "../../core/helpers/typeDef";
 import * as Scalars from "../../scalars";
 
@@ -18,6 +19,7 @@ export default new GiraffeqlObjectType(<ObjectTypeDefinition>{
     ...generateIdField(),
     ...generateTypenameField(Event),
     name: generateStringField({ allowNull: false }),
+    description: generateTextField({ allowNull: true }),
     code: generateStringField({
       allowNull: false,
       sqlOptions: {

diff --git a/frontend/components/table/common/eventColumn.vue b/frontend/components/table/common/eventColumn.vue
@@ -1,16 +1,119 @@
 <template>
   <div v-if="currentValue">
-    <v-avatar size="24">
-      <span class="cubing-icon" :class="currentValue.cubingIcon"></span>
-    </v-avatar>
-    {{ currentValue.name }}
+    <v-menu
+      v-model="open"
+      :close-on-content-click="false"
+      :min-width="300"
+      :max-width="300"
+      offset-y
+      top
+    >
+      <template v-slot:activator="{ on }">
+        <v-chip pill small v-on="on">
+          <v-avatar left>
+            <span class="cubing-icon" :class="currentValue.cubingIcon"></span>
+          </v-avatar>
+          {{ currentValue.name }}
+        </v-chip>
+      </template>
+
+      <v-card>
+        <v-list>
+          <v-list-item>
+            <v-list-item-avatar>
+              <span class="cubing-icon" :class="currentValue.cubingIcon"></span>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <template>
+                <v-list-item-title>{{ currentValue.name }}</v-list-item-title>
+                <v-progress-linear
+                  v-if="loading.loadData"
+                  indeterminate
+                ></v-progress-linear>
+                <template v-else-if="currentEvent">
+                  <v-list-item-subtitle
+                    >Score Method:
+                    {{ currentEvent.scoreMethod }}</v-list-item-subtitle
+                  >
+                </template>
+              </template>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+        <v-divider></v-divider>
+        <v-card-text>
+          <span v-if="currentEvent">{{ currentEvent.description }}</span>
+        </v-card-text>
+        <!--         <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" @click="openPage()">
+            <v-icon left>mdi-open-in-new</v-icon>
+            Open Page
+          </v-btn>
+        </v-card-actions> -->
+      </v-card>
+    </v-menu>
   </div>
 </template>
 
 <script>
 import columnMixin from '~/mixins/column'
+import { handleError, goToPage } from '~/services/base'
+import { executeGiraffeql } from '~/services/giraffeql'
 
 export default {
   mixins: [columnMixin],
+
+  data() {
+    return {
+      currentEvent: null,
+      open: false,
+      loading: {
+        loadData: false,
+      },
+    }
+  },
+
+  watch: {
+    open() {
+      if (!this.open) return
+      this.reset()
+    },
+  },
+
+  methods: {
+    openPage() {
+      goToPage(this, 'event', 'i-view', this.currentValue.id, true)
+    },
+
+    async loadData() {
+      this.loading.loadData = true
+      try {
+        this.currentEvent = await executeGiraffeql(this, {
+          getEvent: {
+            description: true,
+            scoreMethod: true,
+            __args: {
+              id: this.currentValue.id,
+            },
+          },
+        })
+      } catch (err) {
+        handleError(this, err)
+      }
+      this.loading.loadData = false
+    },
+
+    reset() {
+      this.loadData()
+    },
+  },
 }
 </script>
+
+<style scoped>
+.v-chip--pill .v-avatar {
+  height: 24px !important;
+  width: 24px !important;
+}
+</style>
diff --git a/frontend/models/event.ts b/frontend/models/event.ts
@@ -18,6 +18,10 @@ export const Event = <RecordInfo<'event'>>{
     name: {
       text: 'Name',
     },
+    description: {
+      text: 'Description',
+      inputType: 'textarea',
+    },
     'name+code': {
       text: 'Name',
       compoundOptions: {
@@ -82,13 +86,13 @@ export const Event = <RecordInfo<'event'>>{
     downloadOptions: {},
   },
   addOptions: {
-    fields: ['name', 'code', 'cubingIcon', 'scoreMethod'],
+    fields: ['name', 'description', 'code', 'cubingIcon', 'scoreMethod'],
   },
   editOptions: {
-    fields: ['name', 'code', 'cubingIcon'],
+    fields: ['name', 'description', 'code', 'cubingIcon'],
   },
   viewOptions: {
-    fields: ['name', 'code', 'cubingIcon', 'scoreMethod'],
+    fields: ['name', 'description', 'code', 'cubingIcon', 'scoreMethod'],
   },
   deleteOptions: {},
   shareOptions: undefined,

diff --git a/frontend/models/special/index.ts b/frontend/models/special/index.ts
@@ -1,6 +1,7 @@
 export { MyPbs } from './myPbs'
 export { PublicPbs } from './publicPbs'
 export { PublicUsers } from './publicUsers'
+export { PublicEvents } from './publicEvents'
 export { MyProfile } from './myProfile'
 export { PublicFollows } from './publicFollows'
 

diff --git a/frontend/models/special/publicEvents.ts b/frontend/models/special/publicEvents.ts
@@ -0,0 +1,7 @@
+import { Event } from '..'
+
+const PublicEvents = <any>{
+  ...Event,
+}
+
+export { PublicEvents }
diff --git a/frontend/pages/i/view.vue b/frontend/pages/i/view.vue
@@ -16,11 +16,12 @@
 
 <script>
 import ViewRecordPage from '~/components/page/viewRecordPage.vue'
-import { PublicUsers, PublicPbs } from '~/models/special'
+import { PublicUsers, PublicPbs, PublicEvents } from '~/models/special'
 
 const modelsTypeMap = {
   user: PublicUsers,
   personalBest: PublicPbs,
+  event: PublicEvents,
 }
 
 export default {