Merge pull request #3 from vueschool/day-1-catchup

Day 1 catchup

Author: danielkellyio

components.d.ts

@@ -8,6 +8,7 @@ declare module '@vue/runtime-core' {
     AppButton: typeof import('./src/components/AppButton.vue')['default']
     AppImage: typeof import('./src/components/AppImage.vue')['default']
     AppImageDropzone: typeof import('./src/components/AppImageDropzone.vue')['default']
+    AppLoader: typeof import('./src/components/AppLoader.vue')['default']
     AppPageHeading: typeof import('./src/components/AppPageHeading.vue')['default']
     BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     BoardDragAndDrop: typeof import('./src/components/BoardDragAndDrop.vue')['default']

src/components/AppImage.vue

@@ -1,3 +1,3 @@
 <template>
-  <img v-bind="$attrs" />
+  <img />
 </template>

src/components/AppImageDropzone.vue

@@ -1,47 +1,63 @@
 <script setup lang="ts">
-import { useBase64, useDropZone } from "@vueuse/core";
-import { ref } from "vue";
+import { useDropZone, useBase64 } from "@vueuse/core";
+import { ref, computed } from "vue";
+import use8baseStorage from "@/composables/use8baseStorage";
+const props = defineProps<{
+  image?: string;
+  loading?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "upload", payload: { id: string }): void;
+}>();
+// data
+const image = ref<string | File | null | undefined>(props.image);
+const dropZoneRef = ref(null);
 
-const dropzoneEl = ref<HTMLElement | null>(null);
-const file = ref();
-const { base64: url } = useBase64(file);
-const { isOverDropZone } = useDropZone(dropzoneEl, (files) => {
-  if (!files) return;
-  file.value = files[0];
-  console.log(file.value);
-});
+//@ts-expect-error is checked in src for string type
+const { base64 } = useBase64(image);
+const uploadingToFilestack = ref(false);
+const src = computed(() =>
+  typeof image.value === "string" ? image.value : base64.value
+);
 
-function onFileChange(e: any) {
-  file.value = e.target.files[0];
-  console.log(file.value);
+// functions
+function onFileSelect(e: Event) {
+  handleFiles((e.target as HTMLInputElement).files);
 }
-
-function reset() {
-  file.value = null;
+function onDrop(files: File[] | null) {
+  handleFiles(files);
+}
+const { uploadAsset } = use8baseStorage();
+async function handleFiles(files: FileList | File[] | null) {
+  if (!files) return;
+  image.value = files[0];
+  uploadingToFilestack.value = true;
+  const res = await uploadAsset(files[0]);
+  emit("upload", res?.data.fileCreate);
+  uploadingToFilestack.value = false;
 }
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop);
 </script>
 
 <template>
   <div
-    ref="dropzoneEl"
-    class="flex m-4"
+    class="bg-gray-100 p-2 flex justify-center items-center border-2 border-gray-100 relative"
     :class="{
-      border: isOverDropZone,
-      'bg-orange-100': isOverDropZone,
-      'border-orange-400': isOverDropZone,
+      'border-blue-200': isOverDropZone,
+      'border-2': isOverDropZone,
     }"
-    style="width: 300px; height: 200px; background: #3332; position: relative"
+    ref="dropZoneRef"
   >
-    <div class="m-auto opacity-50">Drop a image over or select</div>
-    <div v-if="url" class="absolute left-0 top-0 bottom-0 right-0 object-cover">
-      <img :src="url" class="h-full" />
-    </div>
-    <input
-      class="absolute z-1 left-0 top-0 bottom-0 right-0 opacity-0"
-      type="file"
-      accept="image/*"
-      @input="onFileChange"
-    />
+    <label class="absolute top-0 left-0 right-0 bottom-0 block">
+      <input
+        accept="image/png, image/jpeg"
+        class="hidden"
+        type="file"
+        @change="onFileSelect"
+      />
+    </label>
+    <AppImage v-if="image" :src="src" />
+    <template v-else>{{ "Click or drop to upload image" }}</template>
+    <AppLoader v-if="loading || uploadingToFilestack" :overlay="true" />
   </div>
-  <button @click="reset">Reset</button>
 </template>

src/components/AppLoader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Loader as KLoader } from "@progress/kendo-vue-indicators";
+defineProps<{
+  overlay: boolean;
+}>();
+</script>
+<template>
+  <div :class="{ overlay }">
+    <KLoader type="pulsing" />
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  @apply absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center;
+  background: rgba(255, 255, 255, 0.95);
+  z-index: 2;
+}
+</style>

src/components/BoardDragAndDrop.vue

@@ -11,7 +11,7 @@ const alerts = useAlerts();
 const props = defineProps<{
   board: Board;
   tasks: Task[];
-  addTask(task: Partial<Task>): Task;
+  addTask(task: Partial<Task>): Promise<Task>;
 }>();
 
 // events
@@ -22,7 +22,11 @@ const emit = defineEmits<{
 // local data
 const tasks = reactive(cloneDeep(props.tasks));
 const board = reactive(cloneDeep(props.board));
-const columns = reactive<Column[]>(JSON.parse(board.order as string));
+const columns = reactive<Column[]>(
+  typeof board.order === "string"
+    ? JSON.parse(board.order as string)
+    : board.order
+);
 
 // methods
 function addColumn() {
@@ -36,7 +40,7 @@ function addColumn() {
 watch(columns, () => {
   emit(
     "update",
-    cloneDeep({ ...board, order: JSON.stringify(toRaw(columns)) })
+    cloneDeep({ ...props.board, order: JSON.stringify(toRaw(columns)) })
   );
 });
 
@@ -53,7 +57,7 @@ async function addTask({ column, title }: { column: Column; title: string }) {
 </script>
 
 <template>
-  <div class="flex py-12 items-start">
+  <div class="flex py-12 items-start max-w-full overflow-x-auto">
     <draggable
       :list="columns"
       group="columns"
@@ -65,11 +69,19 @@ async function addTask({ column, title }: { column: Column; title: string }) {
           class="column bg-gray-100 flex flex-col justify-between rounded-lg px-3 py-3 rounded mr-4 w-[300px]"
         >
           <div>
-            <h3>{{ column.title }}</h3>
+            <h3>
+              <input
+                type="text"
+                :value="column.title"
+                class="bg-transparent mb-2"
+                @keydown.enter="($event.target as HTMLInputElement).blur()"
+                @blur="column.title = ($event.target as HTMLInputElement).value"
+              />
+            </h3>
             <draggable
               :list="column.taskIds"
               group="tasks"
-              item-key="uid"
+              item-key="id"
               :animation="200"
               ghost-class="ghost-card"
               class="min-h-[400px]"
@@ -94,6 +106,11 @@ async function addTask({ column, title }: { column: Column; title: string }) {
         </div>
       </template>
     </draggable>
-    <button class="text-gray-500" @click="addColumn">New Column +</button>
+    <button
+      class="text-gray-500 whitespace-nowrap pr-10 block"
+      @click="addColumn"
+    >
+      New Column +
+    </button>
   </div>
 </template>

src/components/BoardMenu.vue

@@ -3,14 +3,39 @@ import { Popup as KPopup } from "@progress/kendo-vue-popup";
 import { Button as KButton } from "@progress/kendo-vue-buttons";
 import { ref } from "vue";
 import type { Board } from "@/types";
+import { onClickOutside } from "@vueuse/core";
+import { useMutation } from "@vue/apollo-composable";
+import attachImageToBoardMutation from "@/graphql/mutations/attachImageToBoard.mutation.gql";
+import { useAlerts } from "@/stores/alerts";
+
+const alerts = useAlerts();
+
 const props = defineProps<{
   board: Board;
 }>();
+
 const show = ref(false);
 const menu = ref(null);
-defineEmits<{
+onClickOutside(menu, () => setTimeout(() => (show.value = false), 2));
+
+const emit = defineEmits<{
   (e: "deleteBoard", payload: null): void;
+  (e: "imageUpload", payload: { id: string }): void;
 }>();
+
+const {
+  mutate: attachImageToBoard,
+  onError: errorAttachingImage,
+  onDone: onImageAttached,
+  loading: imageLoading,
+} = useMutation(attachImageToBoardMutation);
+errorAttachingImage((error) => {
+  console.log(error);
+  alerts.error("Error setting board image");
+});
+onImageAttached((result) => {
+  emit("imageUpload", result.data.boardUpdate.image);
+});
 </script>
 <template>
   <div>
@@ -42,6 +67,20 @@ defineEmits<{
               Delete Board
             </button>
           </li>
+          <li>
+            <strong>Board Image</strong>
+            <AppImageDropzone
+              class="aspect-video w-56"
+              :image="board.image?.downloadUrl"
+              :loading="imageLoading"
+              @upload="
+                attachImageToBoard({
+                  id: board.id,
+                  imageId: $event.id,
+                })
+              "
+            />
+          </li>
         </ul>
       </div>
     </KPopup>

src/components/TaskCreator.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
 }>();
 const handleActivate = () => {
   active.value = true;
-  nextTick(() => input.value.focus());
+  nextTick(() => input.value?.focus());
 };
 const handleEnter = () => {
   emit("create", value.value);

src/components/TheDrawer.vue

@@ -1,55 +1,56 @@
 <script setup lang="ts">
 import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
 import { useLocalStorage } from "@vueuse/core";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import { computed, ref } from "vue";
 
 const router = useRouter();
-const selectedId = ref(0);
+const route = useRoute();
 
 const expanded = useLocalStorage("vue-forge-drawer-expanded", true);
 const expandedIcon = computed(() =>
   expanded.value ? "k-i-arrow-chevron-left" : "k-i-arrow-chevron-right"
 );
-const items = computed(() => [
+const items = computed(() =>
+  [
     {
-    text: "Boards",
-    icon: "k-i-set-column-position",
-    data: {
-      path: "/",
+      text: "Boards",
+      icon: "k-i-set-column-position",
+      data: {
+        path: "/boards",
+      },
     },
-  },
-  {
-    text: "Templates",
-    icon: "k-i-border-left",
-    data: {
-      path: "/templates",
+    {
+      text: "Templates",
+      icon: "k-i-border-left",
+      data: {
+        path: "/templates",
+      },
     },
-  },
-  {
-    text: "Settings",
-    icon: "k-i-gear",
-    data: {
-      path: "/settings",
+    {
+      text: "Settings",
+      icon: "k-i-gear",
+      data: {
+        path: "/settings",
+      },
     },
-  },
-  {
-    text: "Collapse",
-    icon: expandedIcon.value,
-    data: {
-      action: () => (expanded.value = !expanded.value),
+    {
+      text: "Collapse",
+      icon: expandedIcon.value,
+      data: {
+        action: () => (expanded.value = !expanded.value),
+      },
     },
-  },
-].map((item, index) => ({
-  ...item,
-  selected: index === selectedId.value,
+  ].map((item) => ({
+    ...item,
+    selected: item.data.path ? route.path.startsWith(item.data.path) : false,
   }))
 );
 
 function onSelect({ itemIndex }: { itemIndex: number }) {
   const item = items.value[itemIndex];
-  selectedId.value = itemIndex;
+  if (!item) return;
   if (item.data.path) router.push(item.data.path);
   if (typeof item.data.action === "function") item.data.action();
 }
@@ -65,8 +66,8 @@ function onSelect({ itemIndex }: { itemIndex: number }) {
     :items="items"
     @select="onSelect"
   >
-    <DrawerContent>
-      <div class="px-5">
+    <DrawerContent class="max-w-full overflow-hidden">
+      <div class="p-5">
         <router-view />
       </div>
     </DrawerContent>

src/graphql/apolloClient.ts

@@ -0,0 +1,15 @@
+import {
+  ApolloClient,
+  createHttpLink,
+  InMemoryCache,
+} from "@apollo/client/core";
+const httpLink = createHttpLink({
+  uri: "https://api.8base.com/cl5ittcmt05gm09kz812y1b3t",
+});
+
+const cache = new InMemoryCache();
+
+export const apolloClient = new ApolloClient({
+  link: httpLink,
+  cache,
+});