From aae9239177d5ad5c8057df623d1141b6df076d9e Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Tue, 22 Nov 2022 21:00:46 -0500
Subject: [PATCH 01/18] Add start of the individual production view

---
 .../production/ProductionCarousel.vue         | 11 ++++++
 .../production/ProductionCredits.vue          | 11 ++++++
 src/components/production/ProductionTags.vue  | 11 ++++++
 src/graphql/ReadProduction.graphql            | 27 +++++++++++++++
 src/graphql/types.ts                          |  8 +++++
 src/router/index.ts                           | 11 ++++--
 src/views/ProductionView.vue                  | 34 +++++++++++++++++++
 7 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/components/production/ProductionCarousel.vue
 create mode 100644 src/components/production/ProductionCredits.vue
 create mode 100644 src/components/production/ProductionTags.vue
 create mode 100644 src/graphql/ReadProduction.graphql
 create mode 100644 src/views/ProductionView.vue

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
new file mode 100644
index 0000000..ba851b8
--- /dev/null
+++ b/src/components/production/ProductionCarousel.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
new file mode 100644
index 0000000..ba851b8
--- /dev/null
+++ b/src/components/production/ProductionCredits.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/production/ProductionTags.vue b/src/components/production/ProductionTags.vue
new file mode 100644
index 0000000..ba851b8
--- /dev/null
+++ b/src/components/production/ProductionTags.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/graphql/ReadProduction.graphql b/src/graphql/ReadProduction.graphql
new file mode 100644
index 0000000..d28beed
--- /dev/null
+++ b/src/graphql/ReadProduction.graphql
@@ -0,0 +1,27 @@
+query ReadProduction($id: ID!) {
+  ReadProduction: findOneProduction(id: $id) {
+    name
+    description
+    startTime
+    category {
+      name
+    }
+    images {
+      image {
+        id
+        description
+        path
+      }
+    }
+    videos {
+      video {
+        name
+        format
+        metadata
+      }
+    }
+    tags {
+      tag
+    }
+  }
+}
diff --git a/src/graphql/types.ts b/src/graphql/types.ts
index 638f0a6..8f709bb 100644
--- a/src/graphql/types.ts
+++ b/src/graphql/types.ts
@@ -1717,6 +1717,13 @@ export type PermissionsForQueryVariables = Exact<{
 
 export type PermissionsForQuery = { __typename?: 'Query', permissions: Array<{ __typename?: 'GroupPermission', action: string, subject: Array<string>, fields?: Array<string> | null, conditions?: any | null, inverted: boolean, reason?: string | null } | { __typename?: 'UserPermission', action: string, subject: Array<string>, fields?: Array<string> | null, conditions?: any | null, inverted: boolean, reason?: string | null }> };
 
+export type ReadProductionQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type ReadProductionQuery = { __typename?: 'Query', ReadProduction?: { __typename?: 'Production', name: string, description?: string | null, startTime?: any | null, category?: { __typename?: 'Category', name?: string | null } | null, images?: Array<{ __typename?: 'ProductionImage', image: { __typename?: 'Image', id: string, description?: string | null, path: string } }> | null, videos?: Array<{ __typename?: 'ProductionVideo', video: { __typename?: 'Video', name: string, format: VideoFormat, metadata?: any | null } }> | null, tags?: Array<{ __typename?: 'ProductionTag', tag: string }> | null } | null };
+
 export type SelfIdQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -1750,6 +1757,7 @@ export const FindAllProductionsDocument = {"kind":"Document","definitions":[{"ki
 export const ListStreamsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ListStreams"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streams"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"to"}},{"kind":"Field","name":{"kind":"Name","value":"from"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]} as unknown as DocumentNode<ListStreamsQuery, ListStreamsQueryVariables>;
 export const LogoutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Logout"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"logoutSuccess"},"name":{"kind":"Name","value":"logout"}}]}}]} as unknown as DocumentNode<LogoutMutation, LogoutMutationVariables>;
 export const PermissionsForDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PermissionsFor"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"user"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"permissions"},"name":{"kind":"Name","value":"permissionsFor"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"user"},"value":{"kind":"Variable","name":{"kind":"Name","value":"user"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"GroupPermission"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"action"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"fields"}},{"kind":"Field","name":{"kind":"Name","value":"conditions"}},{"kind":"Field","name":{"kind":"Name","value":"inverted"}},{"kind":"Field","name":{"kind":"Name","value":"reason"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"UserPermission"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"action"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"fields"}},{"kind":"Field","name":{"kind":"Name","value":"conditions"}},{"kind":"Field","name":{"kind":"Name","value":"inverted"}},{"kind":"Field","name":{"kind":"Name","value":"reason"}}]}}]}}]}}]} as unknown as DocumentNode<PermissionsForQuery, PermissionsForQueryVariables>;
+export const ReadProductionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadProduction"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"ReadProduction"},"name":{"kind":"Name","value":"findOneProduction"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"videos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"video"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"format"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"tag"}}]}}]}}]}}]} as unknown as DocumentNode<ReadProductionQuery, ReadProductionQueryVariables>;
 export const SelfIdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SelfId"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"self"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<SelfIdQuery, SelfIdQueryVariables>;
 export const StartStreamDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StartStream"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"to"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"from"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"success"},"name":{"kind":"Name","value":"createStream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"to"},"value":{"kind":"Variable","name":{"kind":"Name","value":"to"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"from"},"value":{"kind":"Variable","name":{"kind":"Name","value":"from"}}}]}}]}]}}]} as unknown as DocumentNode<StartStreamMutation, StartStreamMutationVariables>;
 export const StopStreamDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StopStream"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"success"},"name":{"kind":"Name","value":"deleteStream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}]}}]} as unknown as DocumentNode<StopStreamMutation, StopStreamMutationVariables>;
diff --git a/src/router/index.ts b/src/router/index.ts
index 513af5a..861ac9b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
 import ProductionsView from "../views/ProductionsView.vue";
+import ProductionView from "../views/ProductionView.vue";
 import ContactView from "../views/ContactView.vue";
 import LoginView from "../views/LoginView.vue";
 import DonateView from "../views/DonateView.vue";
@@ -124,9 +125,13 @@ const router = createRouter({
       },
     },
     {
-      path: "/productions",
-      name: "productions",
-      component: ProductionsView,
+      path: "/productions/:id",
+      name: "production",
+      component: restrictedComponent(
+        ProductionView,
+        AbilityActions.Read,
+        AbilitySubjects.Production
+      ),
       meta: {
         layoutCssName: "plain-layout",
       },
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
new file mode 100644
index 0000000..3143f16
--- /dev/null
+++ b/src/views/ProductionView.vue
@@ -0,0 +1,34 @@
+<template>
+<div>
+  <ProductionCarousel />
+  <h1>{{ production.result.value?.ReadProduction?.name }}</h1>
+  <span>
+    {{production.result.value?.ReadProduction?.category?.name}}
+    •
+    {{ production.result.value?.ReadProduction.startTime }}
+  </span>
+  <p>{{production.result.value?.ReadProduction.description}}</p>
+  <ProductionCredits />
+  <ProductionTags />
+</div>
+</template>
+
+<script setup lang="ts">
+
+import {useRoute} from "vue-router";
+import {useQuery} from "@vue/apollo-composable";
+import {ReadProductionDocument} from "@/graphql/types";
+import ProductionTags from "@/components/production/ProductionTags.vue";
+import ProductionCredits from "@/components/production/ProductionCredits.vue";
+import ProductionCarousel from "@/components/production/ProductionCarousel.vue";
+
+const route = useRoute();
+
+const production = useQuery(ReadProductionDocument, {
+  id: route.params.id.toString()
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

From d97000632100a8de2b10f15df49089af35e00dc2 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Tue, 22 Nov 2022 21:15:08 -0500
Subject: [PATCH 02/18] Add props to ProductionView subcomponents

---
 src/components/production/ProductionCarousel.vue | 14 ++++++++++++++
 src/components/production/ProductionCredits.vue  |  8 ++++++++
 src/components/production/ProductionTags.vue     |  8 ++++++++
 3 files changed, 30 insertions(+)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index ba851b8..e2a42a6 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -3,6 +3,20 @@
 </template>
 
 <script setup lang="ts">
+import type {Image, Video} from "@/graphql/types";
+import type {PropType} from "vue";
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<
+      (
+        Pick<Video, "__typename" | "name" | "format" | "metadata"> |
+        Pick<Image, "__typename" | "name" | "description" | "path">
+        )[]>,
+    required: true
+  }
+});
+
 
 </script>
 
diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
index ba851b8..4286f6f 100644
--- a/src/components/production/ProductionCredits.vue
+++ b/src/components/production/ProductionCredits.vue
@@ -3,7 +3,15 @@
 </template>
 
 <script setup lang="ts">
+import type {PropType} from "vue";
+import type {Credit} from "@/graphql/types";
 
+const props = defineProps({
+  credits: {
+    type: Array as PropType<Pick<Credit, "__typename" | "title" | "priority" | "person">[]>,
+    required: true
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/production/ProductionTags.vue b/src/components/production/ProductionTags.vue
index ba851b8..37579ad 100644
--- a/src/components/production/ProductionTags.vue
+++ b/src/components/production/ProductionTags.vue
@@ -4,6 +4,14 @@
 
 <script setup lang="ts">
 
+import type {PropType} from "vue";
+
+const props = defineProps({
+  tags: {
+    type: Array as PropType<string[]>,
+    required: true
+  }
+})
 </script>
 
 <style scoped lang="scss">

From 8161e2a8052903666b72609202b6cba423d89c5e Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 23 Nov 2022 19:48:07 -0500
Subject: [PATCH 03/18] Add styling to ProductionView.vue, fix base font not
 being used

---
 src/assets/base.css          |  9 +++--
 src/views/ProductionView.vue | 64 ++++++++++++++++++++++++++++--------
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index cb5ee57..1af543c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:wght@300;400|Oswald:wght@200;300;400&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,700;1,400;1,700;1,500&family=Oswald:wght@300;400&display=swap');
 
 h1,
 h2,
@@ -10,14 +10,17 @@ nav {
   font-family: "Oswald", sans-serif;
 }
 
-html {
-  font-family: "Ubuntu", sans-serif;
+body {
+  font-family: "Bitter", serif !important;
   font-size: 16px;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+}
+
+html {
   box-sizing: border-box;
 }
 
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index 3143f16..37b7465 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -1,34 +1,72 @@
 <template>
-<div>
-  <ProductionCarousel />
-  <h1>{{ production.result.value?.ReadProduction?.name }}</h1>
-  <span>
-    {{production.result.value?.ReadProduction?.category?.name}}
-    •
-    {{ production.result.value?.ReadProduction.startTime }}
-  </span>
-  <p>{{production.result.value?.ReadProduction.description}}</p>
-  <ProductionCredits />
-  <ProductionTags />
-</div>
+  <div class="card-wrapper">
+    <n-card class="card">
+      <ProductionCarousel :items="[]"/>
+      <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
+      <p class="prod-subtitle">{{ productionSubtitle }}</p>
+      <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
+      <ProductionCredits :credits="[]"/>
+      <ProductionTags :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"/>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
-
+import {NCard} from "naive-ui";
 import {useRoute} from "vue-router";
 import {useQuery} from "@vue/apollo-composable";
 import {ReadProductionDocument} from "@/graphql/types";
 import ProductionTags from "@/components/production/ProductionTags.vue";
 import ProductionCredits from "@/components/production/ProductionCredits.vue";
 import ProductionCarousel from "@/components/production/ProductionCarousel.vue";
+import {computed} from "vue";
+import moment from "moment";
 
 const route = useRoute();
 
 const production = useQuery(ReadProductionDocument, {
   id: route.params.id.toString()
 });
+
+/**
+ * Subtitle of the production. Contains the category and start date/time of the production, if available.
+ *   If both are present, they are separated by a bullet point.
+ */
+const productionSubtitle = computed<string>(() => {
+  const startTime = production.result.value?.ReadProduction?.startTime;
+  const category = production.result.value?.ReadProduction?.category;
+
+  const startTimeFormatStr = "MMMM Do YYYY, h:mm A";
+  if (startTime && category) {
+    return `${category.name} \u2022 ${moment(startTime).format(startTimeFormatStr)}`;
+  } else if (startTime) {
+    return moment(startTime).format(startTimeFormatStr);
+  } else if (category) {
+    return category.name || "";
+  } else {
+    return "";
+  }
+})
 </script>
 
 <style scoped lang="scss">
+.card-wrapper {
+  padding-top: 5em;
+  display: flex;
+  justify-content: center;
+}
+.card {
+  width: 80%;
+}
+
+.prod-title, .prod-subtitle {
+  margin: 0;
+}
 
+.prod-subtitle {
+  font-size: 1.1em;
+  font-weight: 500;
+  font-style: italic;
+  opacity: 75%;
+}
 </style>

From 33c7a300f23680f17c0ba600ebc2c2d1a6f393bc Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 23 Nov 2022 19:51:53 -0500
Subject: [PATCH 04/18] Add 16:9 aspect ratio player

---
 src/components/production/ProductionCarousel.vue | 7 ++++++-
 src/views/ProductionView.vue                     | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index e2a42a6..e49a1cc 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -1,5 +1,7 @@
 <template>
+<div class="aspect-ratio">
 
+</div>
 </template>
 
 <script setup lang="ts">
@@ -21,5 +23,8 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-
+.aspect-ratio {
+  aspect-ratio: 16/9;
+  background: black;
+}
 </style>
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index 37b7465..c93af6c 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -57,6 +57,7 @@ const productionSubtitle = computed<string>(() => {
 }
 .card {
   width: 80%;
+  margin-bottom: 3em;
 }
 
 .prod-title, .prod-subtitle {

From 66cc72aeded6c30a9e19b874690a526078dfe752 Mon Sep 17 00:00:00 2001
From: 1milibyte <bobpost515@gmail.com>
Date: Thu, 24 Nov 2022 21:27:04 -0500
Subject: [PATCH 05/18] Mostly finished tags component

Made a button that displays tags when clicked on, tags themselves are buttons but do nothing. Could also possibly have the wrong angle bracket.

Getting the warning:
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop "tags". Expected Array, got Undefined
  at <ProductionTags tags=undefined >

However, it doesn't seem to matter?

Unsure if I can merge line 17 with 18 in any way.

Used hr element instead of the divider component from naive because there are no color props in it.
---
 src/components/production/ProductionTags.vue | 30 +++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/production/ProductionTags.vue b/src/components/production/ProductionTags.vue
index 37579ad..d730669 100644
--- a/src/components/production/ProductionTags.vue
+++ b/src/components/production/ProductionTags.vue
@@ -1,10 +1,25 @@
 <template>
-
+  <NButton text @click="show = !show" style="font-size: 16px; font-family: 'Oswald', sans-serif;">
+    <span :class="{show: show, notShow: !show}" style="font-size: 12px">&#xfe40;</span>&nbsp;Tags
+  </NButton>
+  <hr class="divider">
+  <NCollapseTransition :show="show">
+    <NSpace>
+      <NButton v-for="tag in props.tags" :key="tag" color="#426779" style="color: #68b0d4" size="tiny">
+        {{ tag }} 
+      </NButton>
+    </NSpace>
+  </NCollapseTransition>
 </template>
 
 <script setup lang="ts">
 
 import type {PropType} from "vue";
+import { ref } from "vue";
+import {NCollapseTransition, NButton, NSpace} from "naive-ui"
+
+const show = ref<boolean>(false);
+
 
 const props = defineProps({
   tags: {
@@ -15,5 +30,18 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
+.divider {
+  border-top: 2px;
+}
 
+.notShow {
+  font-weight: bold;
+  transition-duration: 0.25s;
+  transform: rotate(-90deg);
+}
+.show {
+  font-weight: bold;
+  transition-duration: 0.25s;
+  transform: rotate(0deg);
+}
 </style>

From ca029bd13e27464f9c2d38d7075a698eb412d075 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Tue, 29 Nov 2022 20:37:54 -0500
Subject: [PATCH 06/18] Start work on video/image carousel

---
 .../production/ProductionCarousel.vue         | 22 ++++++++++++++---
 src/views/ProductionView.vue                  | 24 +++++++++++++++++--
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index e49a1cc..9a33987 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -1,12 +1,20 @@
 <template>
-<div class="aspect-ratio">
-
-</div>
+<n-carousel class="aspect-ratio">
+  <div v-for="item of items">
+    <div v-if="item.__typename === 'Image'">
+      <img :src="item.path" :alt="item.name" />
+    </div>
+    <div v-else>
+      <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+  </div>
+</n-carousel>
 </template>
 
 <script setup lang="ts">
 import type {Image, Video} from "@/graphql/types";
 import type {PropType} from "vue";
+import {NCarousel} from "naive-ui";
 
 const props = defineProps({
   items: {
@@ -27,4 +35,12 @@ const props = defineProps({
   aspect-ratio: 16/9;
   background: black;
 }
+img {
+  width: 100%;
+  height: 100%;
+}
+.videoplayer {
+  width: 100%;
+  height: 1000px; // FIXME
+}
 </style>
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index c93af6c..90df965 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card-wrapper">
     <n-card class="card">
-      <ProductionCarousel :items="[]"/>
+      <ProductionCarousel :items="sampleItems"/>
       <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
       <p class="prod-subtitle">{{ productionSubtitle }}</p>
       <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
@@ -15,7 +15,7 @@
 import {NCard} from "naive-ui";
 import {useRoute} from "vue-router";
 import {useQuery} from "@vue/apollo-composable";
-import {ReadProductionDocument} from "@/graphql/types";
+import {Image, ReadProductionDocument, Video, VideoFormat} from "@/graphql/types";
 import ProductionTags from "@/components/production/ProductionTags.vue";
 import ProductionCredits from "@/components/production/ProductionCredits.vue";
 import ProductionCarousel from "@/components/production/ProductionCarousel.vue";
@@ -28,6 +28,26 @@ const production = useQuery(ReadProductionDocument, {
   id: route.params.id.toString()
 });
 
+const sampleItems: (
+  Pick<Video, "__typename" | "name" | "format" | "metadata"> |
+  Pick<Image, "__typename" | "name" | "description" | "path">
+  )[] = [
+  {
+    __typename: "Image",
+    name: "Image 1",
+    description: "Image 1 description",
+    path: "https://picsum.photos/200/300"
+  },
+  {
+    __typename: "Video",
+    name: "Video 1",
+    format: VideoFormat.Embed,
+    metadata: {
+      "url": "https://www.youtube.com/embed/P_ckAbOr0r4"
+    }
+  }
+]
+
 /**
  * Subtitle of the production. Contains the category and start date/time of the production, if available.
  *   If both are present, they are separated by a bullet point.

From 78222b0b4c4648747d16c0583b974dd728b42e7f Mon Sep 17 00:00:00 2001
From: 1milibyte <83081917+1milibyte@users.noreply.github.com>
Date: Wed, 30 Nov 2022 19:42:32 -0500
Subject: [PATCH 07/18] Carousel component fixed

Fixed a large portion of css issues. Changed width of the card because it felt too big when at 80%.
Solved why the video player was so poorly sized.
Added functionality to arrow buttons to scroll to the next item in the carousel.
Didn't remove the national geographic giraffe or the randomizer image.
---
 .../production/ProductionCarousel.vue         | 58 ++++++++++++++-----
 src/views/ProductionView.vue                  |  3 +-
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index 9a33987..bb905c8 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -1,20 +1,29 @@
 <template>
-<n-carousel class="aspect-ratio">
-  <div v-for="item of items">
-    <div v-if="item.__typename === 'Image'">
-      <img :src="item.path" :alt="item.name" />
+  <n-carousel ref="carousel" class="aspect-ratio">
+    <div v-for="item of items">
+      <div v-if="item.__typename === 'Image'">
+        <img :src="item.path" :alt="item.name" />
+      </div>
+      <div v-else>
+        <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
     </div>
-    <div v-else>
-      <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-    </div>
-  </div>
-</n-carousel>
+  </n-carousel>
+  <n-space justify="space-between">
+    <n-button text class="left carouselbtns" @click="prev">
+      &#10140;
+    </n-button>
+    <n-button text class="carouselbtns" @click="next">
+      &#10140;
+    </n-button>
+  </n-space>
 </template>
 
 <script setup lang="ts">
 import type {Image, Video} from "@/graphql/types";
 import type {PropType} from "vue";
-import {NCarousel} from "naive-ui";
+import { ref } from "vue";
+import {NCarousel, NSpace, NButton} from "naive-ui";
 
 const props = defineProps({
   items: {
@@ -27,20 +36,41 @@ const props = defineProps({
   }
 });
 
+const carousel = ref<InstanceType<typeof NCarousel> | null>(null);
+
+// Components don't load in fast enough for refs so we need to use functions instead of just calling their methods
+function prev() {
+  carousel.value?.prev();
+}
 
+function next() {
+  carousel.value?.next();
+}
 </script>
 
 <style scoped lang="scss">
 .aspect-ratio {
-  aspect-ratio: 16/9;
-  background: black;
+  aspect-ratio: 16 / 9;
+  background-color: black;
+  height: 100%;
+  width: 100%;
 }
 img {
-  width: 100%;
+  aspect-ratio: 16 / 9;
   height: 100%;
+  width: 100%;
 }
 .videoplayer {
+  aspect-ratio: 16 / 9;
+  height: 100%;
   width: 100%;
-  height: 1000px; // FIXME
+}
+
+.carouselbtns {
+  font-size: 28px;
+}
+
+.left {
+  transform: rotate(180deg);
 }
 </style>
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index 90df965..5904d20 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -76,7 +76,8 @@ const productionSubtitle = computed<string>(() => {
   justify-content: center;
 }
 .card {
-  width: 80%;
+  height: 100%;
+  width: 65%;
   margin-bottom: 3em;
 }
 

From 70aa759e6a88a74d3fe1989b7c3a09e4f8bd4ac8 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 20:43:20 -0500
Subject: [PATCH 08/18] Add basic image/video display with real data to
 production page

---
 .../production/ProductionCarousel.vue         |  6 ++-
 src/util/helper.ts                            |  9 ++++
 src/views/ProductionView.vue                  | 54 +++++++++++--------
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index bb905c8..81be731 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import type {Image, Video} from "@/graphql/types";
 import type {PropType} from "vue";
-import { ref } from "vue";
+import {ref, watchEffect} from "vue";
 import {NCarousel, NSpace, NButton} from "naive-ui";
 
 const props = defineProps({
@@ -36,6 +36,10 @@ const props = defineProps({
   }
 });
 
+watchEffect(() => {
+  console.log(props.items);
+})
+
 const carousel = ref<InstanceType<typeof NCarousel> | null>(null);
 
 // Components don't load in fast enough for refs so we need to use functions instead of just calling their methods
diff --git a/src/util/helper.ts b/src/util/helper.ts
index 932c5cd..11c4567 100644
--- a/src/util/helper.ts
+++ b/src/util/helper.ts
@@ -45,6 +45,7 @@ export function shouldOpenInNewTab(e: MouseEvent): boolean {
  *   NavigationHeaderButton, and I am not aware of any way to make Vue templates refer to themselves in their
  *   script.
  * @param child
+ * @param currentDepth
  */
 export function computeNavDropdownChildElement(
   child: NavButton,
@@ -63,3 +64,11 @@ export function computeNavDropdownChildElement(
 }
 
 export type FontAwesomeIconWeights = "fas" | "fal" | "fad" | "fab";
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? DeepPartial<U>[]
+    : T[P] extends boolean | string | number
+    ? T[P]
+    : DeepPartial<T[P]>;
+};
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index 5904d20..dc536f5 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card-wrapper">
     <n-card class="card">
-      <ProductionCarousel :items="sampleItems"/>
+      <ProductionCarousel :items="productionImagesAndVideos"/>
       <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
       <p class="prod-subtitle">{{ productionSubtitle }}</p>
       <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
@@ -15,12 +15,13 @@
 import {NCard} from "naive-ui";
 import {useRoute} from "vue-router";
 import {useQuery} from "@vue/apollo-composable";
-import {Image, ReadProductionDocument, Video, VideoFormat} from "@/graphql/types";
+import {ProductionImage, ProductionVideo, ReadProductionDocument} from "@/graphql/types";
 import ProductionTags from "@/components/production/ProductionTags.vue";
 import ProductionCredits from "@/components/production/ProductionCredits.vue";
 import ProductionCarousel from "@/components/production/ProductionCarousel.vue";
 import {computed} from "vue";
 import moment from "moment";
+import type {DeepPartial} from "@/util/helper";
 
 const route = useRoute();
 
@@ -28,25 +29,36 @@ const production = useQuery(ReadProductionDocument, {
   id: route.params.id.toString()
 });
 
-const sampleItems: (
-  Pick<Video, "__typename" | "name" | "format" | "metadata"> |
-  Pick<Image, "__typename" | "name" | "description" | "path">
-  )[] = [
-  {
-    __typename: "Image",
-    name: "Image 1",
-    description: "Image 1 description",
-    path: "https://picsum.photos/200/300"
-  },
-  {
-    __typename: "Video",
-    name: "Video 1",
-    format: VideoFormat.Embed,
-    metadata: {
-      "url": "https://www.youtube.com/embed/P_ckAbOr0r4"
-    }
-  }
-]
+const productionImagesAndVideos = computed(() => {
+  const images = production.result.value?.ReadProduction?.images?.map((prodImage: DeepPartial<ProductionImage>) => {
+    return prodImage.image;
+  }) ?? [];
+  const videos = production.result.value?.ReadProduction?.videos?.map((prodVideo: DeepPartial<ProductionVideo>) => {
+    return prodVideo.video;
+  }) ?? [];
+
+  return [...images, ...videos];
+});
+//
+// const sampleItems: (
+//   Pick<Video, "__typename" | "name" | "format" | "metadata"> |
+//   Pick<Image, "__typename" | "name" | "description" | "path">
+//   )[] = [
+//   {
+//     __typename: "Image",
+//     name: "Image 1",
+//     description: "Image 1 description",
+//     path: "https://picsum.photos/200/300"
+//   },
+//   {
+//     __typename: "Video",
+//     name: "Video 1",
+//     format: VideoFormat.Embed,
+//     metadata: {
+//       "url": "https://www.youtube.com/embed/P_ckAbOr0r4"
+//     }
+//   }
+// ]
 
 /**
  * Subtitle of the production. Contains the category and start date/time of the production, if available.

From 48eb4a33726afa1f2561bc89987878a5aabb153b Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 20:52:07 -0500
Subject: [PATCH 09/18] Hide arrows when only one media item is available on
 productions page. Hide carousel if no items are available

---
 .../production/ProductionCarousel.vue         | 44 ++++++++++++-------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index 81be731..5d7315a 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -1,22 +1,27 @@
 <template>
-  <n-carousel ref="carousel" class="aspect-ratio">
-    <div v-for="item of items">
-      <div v-if="item.__typename === 'Image'">
-        <img :src="item.path" :alt="item.name" />
+  <div v-if="items.length > 0">
+    <n-carousel ref="carousel" class="aspect-ratio">
+      <div v-for="item of items">
+        <div v-if="item.__typename === 'Image'">
+          <img :src="item.path" :alt="item.name" />
+        </div>
+        <div v-else>
+          <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
       </div>
-      <div v-else>
-        <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-      </div>
-    </div>
-  </n-carousel>
-  <n-space justify="space-between">
-    <n-button text class="left carouselbtns" @click="prev">
-      &#10140;
-    </n-button>
-    <n-button text class="carouselbtns" @click="next">
-      &#10140;
-    </n-button>
-  </n-space>
+    </n-carousel>
+    <n-space justify="space-between" v-if="items.length > 1">
+      <n-button text class="left carouselbtns" @click="prev">
+        &#10140;
+      </n-button>
+      <n-button text class="carouselbtns" @click="next">
+        &#10140;
+      </n-button>
+    </n-space>
+  </div>
+  <div v-else>
+    <p class="no-media">No images or videos available.</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -77,4 +82,9 @@ img {
 .left {
   transform: rotate(180deg);
 }
+
+.no-media {
+  text-align: center;
+  font-style: italic;
+}
 </style>

From 7d4394c7668e3905639fefa69a6adef86698920d Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 21:01:47 -0500
Subject: [PATCH 10/18] Add error message for unsupported video types (todo)

---
 .../production/ProductionCarousel.vue         | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index 5d7315a..ed13492 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -1,12 +1,16 @@
 <template>
   <div v-if="items.length > 0">
     <n-carousel ref="carousel" class="aspect-ratio">
-      <div v-for="item of items">
+      <div v-for="item of items" class="carousel-contents extend-height">
         <div v-if="item.__typename === 'Image'">
           <img :src="item.path" :alt="item.name" />
         </div>
-        <div v-else>
-          <iframe class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <div v-else class="extend-height">
+          <iframe v-if="item.format === 'EMBED'" class="videoplayer" :src="item.metadata.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <div v-else class="unsupported-format">
+            <p>Sorry, videos in this format currently cannot be played.</p>
+            <p>Contact us to download a copy of this video.</p>
+          </div>
         </div>
       </div>
     </n-carousel>
@@ -59,11 +63,13 @@ function next() {
 
 <style scoped lang="scss">
 .aspect-ratio {
+  position: relative;
   aspect-ratio: 16 / 9;
   background-color: black;
   height: 100%;
   width: 100%;
 }
+
 img {
   aspect-ratio: 16 / 9;
   height: 100%;
@@ -87,4 +93,20 @@ img {
   text-align: center;
   font-style: italic;
 }
+
+.unsupported-format {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+  font-style: italic;
+}
+
+.extend-height {
+  position: relative;
+  height: 100%;
+}
+
 </style>

From aaa988e086dc5287047ecf7d9634c428b232ec70 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 21:08:05 -0500
Subject: [PATCH 11/18] Update carousel buttons to use fontawesome icons

---
 src/components/production/ProductionCarousel.vue | 12 +++++++-----
 src/main.ts                                      |  8 +++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index ed13492..48f6cbe 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -15,11 +15,11 @@
       </div>
     </n-carousel>
     <n-space justify="space-between" v-if="items.length > 1">
-      <n-button text class="left carouselbtns" @click="prev">
-        &#10140;
+      <n-button text class="carousel-btns" @click="prev">
+        <FontAwesomeIcon icon="fas fa-arrow-left" />
       </n-button>
-      <n-button text class="carouselbtns" @click="next">
-        &#10140;
+      <n-button text class="carousel-btns" @click="next">
+        <FontAwesomeIcon icon="fas fa-arrow-right" />
       </n-button>
     </n-space>
   </div>
@@ -33,6 +33,7 @@ import type {Image, Video} from "@/graphql/types";
 import type {PropType} from "vue";
 import {ref, watchEffect} from "vue";
 import {NCarousel, NSpace, NButton} from "naive-ui";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 
 const props = defineProps({
   items: {
@@ -81,7 +82,8 @@ img {
   width: 100%;
 }
 
-.carouselbtns {
+.carousel-btns {
+  margin-top: 5px;
   font-size: 28px;
 }
 
diff --git a/src/main.ts b/src/main.ts
index 011f49b..d0c03a9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,11 @@ import { createApolloProvider } from "@vue/apollo-option";
 import { DefaultApolloClient } from "@vue/apollo-composable";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faCaretDown,
+  faArrowLeft,
+  faArrowRight,
+} from "@fortawesome/pro-solid-svg-icons";
 import {
   faCircleInfo,
   faHome,
@@ -50,6 +54,8 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 library.add(faCaretDown);
+library.add(faArrowLeft);
+library.add(faArrowRight);
 
 library.add(faHome);
 library.add(faCircleInfo);

From 7b89d5060f8a8aa74930917af3533b5fce078cf1 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 21:08:15 -0500
Subject: [PATCH 12/18] remove unused left class

---
 src/components/production/ProductionCarousel.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/production/ProductionCarousel.vue b/src/components/production/ProductionCarousel.vue
index 48f6cbe..623112d 100644
--- a/src/components/production/ProductionCarousel.vue
+++ b/src/components/production/ProductionCarousel.vue
@@ -87,10 +87,6 @@ img {
   font-size: 28px;
 }
 
-.left {
-  transform: rotate(180deg);
-}
-
 .no-media {
   text-align: center;
   font-style: italic;

From a211c0879fec37d5a64cbc2895ae97ece4201c85 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 21:13:40 -0500
Subject: [PATCH 13/18] Add fetching real credit data to Production page

---
 src/components/production/ProductionCredits.vue | 7 +++++--
 src/graphql/ReadProduction.graphql              | 9 +++++++++
 src/graphql/types.ts                            | 5 +++--
 src/views/ProductionView.vue                    | 2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
index 4286f6f..123cf55 100644
--- a/src/components/production/ProductionCredits.vue
+++ b/src/components/production/ProductionCredits.vue
@@ -1,5 +1,8 @@
 <template>
-
+  <h3>Credits</h3>
+  <div>
+    {{credits}}
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +11,7 @@ import type {Credit} from "@/graphql/types";
 
 const props = defineProps({
   credits: {
-    type: Array as PropType<Pick<Credit, "__typename" | "title" | "priority" | "person">[]>,
+    type: Array as PropType<Pick<Credit, "__typename" | "title" | "priority" | "person" | "id">[]>,
     required: true
   }
 });
diff --git a/src/graphql/ReadProduction.graphql b/src/graphql/ReadProduction.graphql
index d28beed..db879df 100644
--- a/src/graphql/ReadProduction.graphql
+++ b/src/graphql/ReadProduction.graphql
@@ -3,6 +3,15 @@ query ReadProduction($id: ID!) {
     name
     description
     startTime
+    credits {
+      id
+      person {
+        id
+        name
+      }
+      title
+      priority
+    }
     category {
       name
     }
diff --git a/src/graphql/types.ts b/src/graphql/types.ts
index 8f709bb..0845ef4 100644
--- a/src/graphql/types.ts
+++ b/src/graphql/types.ts
@@ -958,6 +958,7 @@ export type Production = {
   category?: Maybe<Category>;
   closetLocation?: Maybe<Scalars['String']>;
   closetTime?: Maybe<Scalars['DateTime']>;
+  credits?: Maybe<Array<Credit>>;
   description?: Maybe<Scalars['String']>;
   discordChannel?: Maybe<Scalars['String']>;
   discordServer?: Maybe<Scalars['String']>;
@@ -1722,7 +1723,7 @@ export type ReadProductionQueryVariables = Exact<{
 }>;
 
 
-export type ReadProductionQuery = { __typename?: 'Query', ReadProduction?: { __typename?: 'Production', name: string, description?: string | null, startTime?: any | null, category?: { __typename?: 'Category', name?: string | null } | null, images?: Array<{ __typename?: 'ProductionImage', image: { __typename?: 'Image', id: string, description?: string | null, path: string } }> | null, videos?: Array<{ __typename?: 'ProductionVideo', video: { __typename?: 'Video', name: string, format: VideoFormat, metadata?: any | null } }> | null, tags?: Array<{ __typename?: 'ProductionTag', tag: string }> | null } | null };
+export type ReadProductionQuery = { __typename?: 'Query', ReadProduction?: { __typename?: 'Production', name: string, description?: string | null, startTime?: any | null, credits?: Array<{ __typename?: 'Credit', id: string, title?: string | null, priority: number, person: { __typename?: 'Person', id: string, name: string } }> | null, category?: { __typename?: 'Category', name?: string | null } | null, images?: Array<{ __typename?: 'ProductionImage', image: { __typename?: 'Image', id: string, description?: string | null, path: string } }> | null, videos?: Array<{ __typename?: 'ProductionVideo', video: { __typename?: 'Video', name: string, format: VideoFormat, metadata?: any | null } }> | null, tags?: Array<{ __typename?: 'ProductionTag', tag: string }> | null } | null };
 
 export type SelfIdQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1757,7 +1758,7 @@ export const FindAllProductionsDocument = {"kind":"Document","definitions":[{"ki
 export const ListStreamsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ListStreams"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streams"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"to"}},{"kind":"Field","name":{"kind":"Name","value":"from"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]} as unknown as DocumentNode<ListStreamsQuery, ListStreamsQueryVariables>;
 export const LogoutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Logout"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"logoutSuccess"},"name":{"kind":"Name","value":"logout"}}]}}]} as unknown as DocumentNode<LogoutMutation, LogoutMutationVariables>;
 export const PermissionsForDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PermissionsFor"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"user"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"permissions"},"name":{"kind":"Name","value":"permissionsFor"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"user"},"value":{"kind":"Variable","name":{"kind":"Name","value":"user"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"GroupPermission"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"action"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"fields"}},{"kind":"Field","name":{"kind":"Name","value":"conditions"}},{"kind":"Field","name":{"kind":"Name","value":"inverted"}},{"kind":"Field","name":{"kind":"Name","value":"reason"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"UserPermission"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"action"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"fields"}},{"kind":"Field","name":{"kind":"Name","value":"conditions"}},{"kind":"Field","name":{"kind":"Name","value":"inverted"}},{"kind":"Field","name":{"kind":"Name","value":"reason"}}]}}]}}]}}]} as unknown as DocumentNode<PermissionsForQuery, PermissionsForQueryVariables>;
-export const ReadProductionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadProduction"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"ReadProduction"},"name":{"kind":"Name","value":"findOneProduction"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"videos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"video"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"format"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"tag"}}]}}]}}]}}]} as unknown as DocumentNode<ReadProductionQuery, ReadProductionQueryVariables>;
+export const ReadProductionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadProduction"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"ReadProduction"},"name":{"kind":"Name","value":"findOneProduction"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"credits"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"person"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"videos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"video"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"format"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"tag"}}]}}]}}]}}]} as unknown as DocumentNode<ReadProductionQuery, ReadProductionQueryVariables>;
 export const SelfIdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SelfId"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"self"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<SelfIdQuery, SelfIdQueryVariables>;
 export const StartStreamDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StartStream"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"to"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"from"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"success"},"name":{"kind":"Name","value":"createStream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"to"},"value":{"kind":"Variable","name":{"kind":"Name","value":"to"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"from"},"value":{"kind":"Variable","name":{"kind":"Name","value":"from"}}}]}}]}]}}]} as unknown as DocumentNode<StartStreamMutation, StartStreamMutationVariables>;
 export const StopStreamDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StopStream"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"success"},"name":{"kind":"Name","value":"deleteStream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}]}}]} as unknown as DocumentNode<StopStreamMutation, StopStreamMutationVariables>;
diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index dc536f5..ca92244 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -5,7 +5,7 @@
       <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
       <p class="prod-subtitle">{{ productionSubtitle }}</p>
       <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
-      <ProductionCredits :credits="[]"/>
+      <ProductionCredits :credits="production.result.value?.ReadProduction.credits"/>
       <ProductionTags :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"/>
     </n-card>
   </div>

From 714bc02e9f14f11f731a372539caa7a017ab0a34 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Wed, 21 Dec 2022 21:17:22 -0500
Subject: [PATCH 14/18] Add loading spinner when production data is still being
 fetched

---
 src/views/ProductionView.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index ca92244..f9f0771 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -1,18 +1,24 @@
 <template>
   <div class="card-wrapper">
     <n-card class="card">
-      <ProductionCarousel :items="productionImagesAndVideos"/>
-      <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
-      <p class="prod-subtitle">{{ productionSubtitle }}</p>
-      <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
-      <ProductionCredits :credits="production.result.value?.ReadProduction.credits"/>
-      <ProductionTags :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"/>
+      <div v-if="!production.loading.value">
+        <ProductionCarousel :items="productionImagesAndVideos"/>
+        <h1 class="prod-title">{{ production.result.value?.ReadProduction?.name }}</h1>
+        <p class="prod-subtitle">{{ productionSubtitle }}</p>
+        <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
+        <ProductionCredits :credits="production.result.value?.ReadProduction.credits"/>
+        <ProductionTags :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"/>
+      </div>
+      <div v-else class="loading">
+        <n-spin />
+        <p>Loading...</p>
+      </div>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import {NCard} from "naive-ui";
+import {NCard, NSpin} from "naive-ui";
 import {useRoute} from "vue-router";
 import {useQuery} from "@vue/apollo-composable";
 import {ProductionImage, ProductionVideo, ReadProductionDocument} from "@/graphql/types";
@@ -93,6 +99,10 @@ const productionSubtitle = computed<string>(() => {
   margin-bottom: 3em;
 }
 
+.loading {
+  text-align: center;
+}
+
 .prod-title, .prod-subtitle {
   margin: 0;
 }

From bd2c50a999c74bd6dcb7993669723ef62ce516b3 Mon Sep 17 00:00:00 2001
From: 1milibyte <bobpost515@gmail.com>
Date: Thu, 22 Dec 2022 22:29:48 -0500
Subject: [PATCH 15/18] Added check for empty tags, added credits component

productionTags now clearly tells users if the production has no tags.

productionCredits adds credits to all users in the production, added media queries along with it, and default profile pictures.
---
 .../production/ProductionCredits.vue          | 44 +++++++++++++++++--
 src/components/production/ProductionTags.vue  |  7 ++-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
index 123cf55..f36ceb1 100644
--- a/src/components/production/ProductionCredits.vue
+++ b/src/components/production/ProductionCredits.vue
@@ -1,13 +1,24 @@
 <template>
   <h3>Credits</h3>
-  <div>
-    {{credits}}
-  </div>
+    <n-grid :cols="3">
+        <n-grid-item v-for="credit in credits" :key="credit.id" class="col">
+          <!--TODO-->
+          <span class="no-display-at-1250">&ensp; </span>
+          <n-image v-if="credit.person.images" :src="credit.person.images[0].image" class="profile-icon" width="25"/>
+          <n-image v-else width="25" class="profile-icon"
+            src="https://img.freepik.com/premium-vector/male-avatar-icon-unknown-anonymous-person-default-avatar-profile-icon-social-media-user-business-man-man-profile-silhouette-isolated-white-background-vector-illustration_735449-120.jpg"
+          />
+          <span class="name">&nbsp;{{ credit.person.name }}</span>
+          <span class="no-display-at-1250"> - </span>
+          <span class="title">{{ credit.title }}</span>
+        </n-grid-item>
+    </n-grid>
 </template>
 
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {Credit} from "@/graphql/types";
+import {NGrid, NGridItem, NImage} from "naive-ui";
 
 const props = defineProps({
   credits: {
@@ -15,8 +26,35 @@ const props = defineProps({
     required: true
   }
 });
+
 </script>
 
 <style scoped lang="scss">
 
+.profile-icon {
+  border-radius: 50%;
+  display: inline;
+  vertical-align: middle;
+}
+
+.name {
+  font-weight: bold;
+}
+
+.col {
+  padding: 5px;
+}
+
+@media screen and (max-width: 1250px) {
+  .col {
+    text-align: center;
+   }
+  .name {
+    display: block;
+  }
+  .no-display-at-1250 {
+    display: none;
+  }
+}
+
 </style>
diff --git a/src/components/production/ProductionTags.vue b/src/components/production/ProductionTags.vue
index d730669..3619635 100644
--- a/src/components/production/ProductionTags.vue
+++ b/src/components/production/ProductionTags.vue
@@ -5,9 +5,14 @@
   <hr class="divider">
   <NCollapseTransition :show="show">
     <NSpace>
+      <div v-if="!tags.length > 0">
       <NButton v-for="tag in props.tags" :key="tag" color="#426779" style="color: #68b0d4" size="tiny">
-        {{ tag }} 
+        {{ tag }}
       </NButton>
+      </div>
+      <div v-else>
+        No tags available for this production.
+      </div>
     </NSpace>
   </NCollapseTransition>
 </template>

From 43dbc948bf0a2764d4b78e2fbbe5e63d1b98da50 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Fri, 30 Dec 2022 19:08:11 -0500
Subject: [PATCH 16/18] Update credits to be sorted and remove profile picture
 (for now)

---
 src/components/production/ProductionCredits.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
index f36ceb1..95894a0 100644
--- a/src/components/production/ProductionCredits.vue
+++ b/src/components/production/ProductionCredits.vue
@@ -1,13 +1,9 @@
 <template>
   <h3>Credits</h3>
     <n-grid :cols="3">
-        <n-grid-item v-for="credit in credits" :key="credit.id" class="col">
+        <n-grid-item v-for="credit in sortedCredits" :key="credit.id" class="col">
           <!--TODO-->
           <span class="no-display-at-1250">&ensp; </span>
-          <n-image v-if="credit.person.images" :src="credit.person.images[0].image" class="profile-icon" width="25"/>
-          <n-image v-else width="25" class="profile-icon"
-            src="https://img.freepik.com/premium-vector/male-avatar-icon-unknown-anonymous-person-default-avatar-profile-icon-social-media-user-business-man-man-profile-silhouette-isolated-white-background-vector-illustration_735449-120.jpg"
-          />
           <span class="name">&nbsp;{{ credit.person.name }}</span>
           <span class="no-display-at-1250"> - </span>
           <span class="title">{{ credit.title }}</span>
@@ -18,7 +14,8 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {Credit} from "@/graphql/types";
-import {NGrid, NGridItem, NImage} from "naive-ui";
+import {NGrid, NGridItem} from "naive-ui";
+import {computed} from "vue";
 
 const props = defineProps({
   credits: {
@@ -27,6 +24,10 @@ const props = defineProps({
   }
 });
 
+const sortedCredits = computed(() => {
+  return [...props.credits].sort((a, b) => b.priority - a.priority);
+});
+
 </script>
 
 <style scoped lang="scss">

From 7a653f2aa11739bf0f6ab68e20308af48de8b1f1 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Fri, 30 Dec 2022 19:11:04 -0500
Subject: [PATCH 17/18] Hide tags dropdown when no tags are set on a Production

---
 src/views/ProductionView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/ProductionView.vue b/src/views/ProductionView.vue
index f9f0771..27a0f97 100644
--- a/src/views/ProductionView.vue
+++ b/src/views/ProductionView.vue
@@ -7,7 +7,10 @@
         <p class="prod-subtitle">{{ productionSubtitle }}</p>
         <p class="prod-description">{{ production.result.value?.ReadProduction?.description }}</p>
         <ProductionCredits :credits="production.result.value?.ReadProduction.credits"/>
-        <ProductionTags :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"/>
+        <ProductionTags
+          v-if="production.result.value?.ReadProduction.tags.length > 0"
+          :tags="production.result.value?.ReadProduction?.tags.map(tag => tag.tag)"
+        />
       </div>
       <div v-else class="loading">
         <n-spin />

From 0c7d1c32fd401ff6b29a3d14b1edd4467cf47677 Mon Sep 17 00:00:00 2001
From: Erik Roberts <me@ecr.dev>
Date: Fri, 30 Dec 2022 19:14:54 -0500
Subject: [PATCH 18/18] Hide credits when no credits are listed. Remove
 redundant hidden tags dropdown code

---
 src/components/production/ProductionCredits.vue | 17 +++++++++--------
 src/components/production/ProductionTags.vue    |  8 ++------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/production/ProductionCredits.vue b/src/components/production/ProductionCredits.vue
index 95894a0..db06be3 100644
--- a/src/components/production/ProductionCredits.vue
+++ b/src/components/production/ProductionCredits.vue
@@ -1,14 +1,15 @@
 <template>
-  <h3>Credits</h3>
+  <div v-if="sortedCredits.length > 0">
+    <h3>Credits</h3>
     <n-grid :cols="3">
-        <n-grid-item v-for="credit in sortedCredits" :key="credit.id" class="col">
-          <!--TODO-->
-          <span class="no-display-at-1250">&ensp; </span>
-          <span class="name">&nbsp;{{ credit.person.name }}</span>
-          <span class="no-display-at-1250"> - </span>
-          <span class="title">{{ credit.title }}</span>
-        </n-grid-item>
+      <n-grid-item v-for="credit in sortedCredits" :key="credit.id" class="col">
+        <span class="no-display-at-1250">&ensp; </span>
+        <span class="name">&nbsp;{{ credit.person.name }}</span>
+        <span class="no-display-at-1250"> - </span>
+        <span class="title">{{ credit.title }}</span>
+      </n-grid-item>
     </n-grid>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/production/ProductionTags.vue b/src/components/production/ProductionTags.vue
index 3619635..2089f66 100644
--- a/src/components/production/ProductionTags.vue
+++ b/src/components/production/ProductionTags.vue
@@ -5,14 +5,9 @@
   <hr class="divider">
   <NCollapseTransition :show="show">
     <NSpace>
-      <div v-if="!tags.length > 0">
       <NButton v-for="tag in props.tags" :key="tag" color="#426779" style="color: #68b0d4" size="tiny">
         {{ tag }}
       </NButton>
-      </div>
-      <div v-else>
-        No tags available for this production.
-      </div>
     </NSpace>
   </NCollapseTransition>
 </template>
@@ -20,7 +15,7 @@
 <script setup lang="ts">
 
 import type {PropType} from "vue";
-import { ref } from "vue";
+import {ref} from "vue";
 import {NCollapseTransition, NButton, NSpace} from "naive-ui"
 
 const show = ref<boolean>(false);
@@ -44,6 +39,7 @@ const props = defineProps({
   transition-duration: 0.25s;
   transform: rotate(-90deg);
 }
+
 .show {
   font-weight: bold;
   transition-duration: 0.25s;