Merge branch 'develop'

Author: lancewilhelm

README.md

@@ -1,84 +1,55 @@
-# Qua
+![qua](./logo.png)
 
-Open source QDA software running on Vue + Nuxt.js + Supabase and a little bit of Tailwind CSS.
+![Nuxt](https://img.shields.io/badge/Nuxt-%23010113?style=for-the-badge&logo=nuxtdotjs)
+![Vue](https://img.shields.io/badge/Vue-%23191A22?style=for-the-badge&logo=vuedotjs)
+![Supabase](https://img.shields.io/badge/Supabase-%230E0E10?style=for-the-badge&logo=supabase)
 
-If you are going to develop this project yourself, you will need to create a `.env` file in the root of the project with the following content:
-
-```bash
-SUPABASE_URL=https://your-supabase-url.supabase.co
-SUPABASE_KEY=your-supabase-key
-```
+Open source QDA software, because I don't want to pay for one and I got tired of using excel.
 
 That should do it for now...more to come.
 
-## Setup
+# running locally
 
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
+If you are going to develop this project yourself, you will need to create a `.env` file in the root of the project with the following content:
 
-# bun
-bun install
+```
+SUPABASE_URL=https://your-supabase-url.supabase.co (replace with your supabase url)
+SUPABASE_KEY=your-supabase-key (replace with your supabase key)
+BASE_URL=http://localhost:3000 (replace with your local development url)
+SUPABASE_AUTH_GITHUB_CLIENT_ID=your-github-client-id (optional if using github auth)
+SUPABASE_AUTH_GITHUB_CLIENT_SECRET=your-github-client-secret (optional if using github auth)
+LOCAL_DEV=true (optional if you will be resetting your database often)
 ```
 
-## Development Server
+The `LOCAL_DEV` variable was created to handle local Supabase storage. When initializing the local Supabase instance, there is currently no way to popultate objects in the `files` storage bucket. This flag points the application to use data from the `public/samples/` directory instead of fetching a signed url from the Supabase storage endpoint. Keep this in mind if you plan to upload data locally as the data will not be able to be accessed. Reference the [FileViewerPanel](./components/FileViewerPanel.vue) component for this implementation.
 
-Start the development server on `http://localhost:3000`:
+## Supabase
 
-```bash
-# npm
-npm run dev
+This project takes advantage of [Supabase](https://supabase.com/) for authentication, database, and storage for now. You have two options for setting up Supabase:
 
-# pnpm
-pnpm run dev
+1) Create a project on [Supabase](https://supabase.com/) and use the provided URL and key in your `.env` file. All data will be stored in your Supabase project on their servers. **TODO: Need to add information on how to set up the database schema.**
+2) Run a local instance of Supabase using [Supabase CLI](https://supabase.com/docs/guides/cli/local-development). Grab the URL and key from the CLI output and use them in your `.env` file. All data will be stored locally on your machine. This is recommended for development as this repo contains migrations and seed information in [./supabase](./supabase/). **Not recommended for long term usage as you may lose your data if you are not careful. Instead, use the Supabase Platform resources to ensure your data is backed up, i.e. option 1.** (Requires Docker)
 
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
+Once you have set up Supabase, you can start the application locally.
 
-## Production
+## running the app
 
-Build the application for production:
+Make sure to install the dependencies:
 
 ```bash
 # npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
+npm install
 ```
 
-Locally preview production build:
+Start the development server on `http://localhost:3000`:
 
 ```bash
 # npm
-npm run preview
-
-# pnpm
-pnpm run preview
+npm run dev
+```
 
-# yarn
-yarn preview
+You may want to change the host to `127.0.0.1` if `localhost` is acting slow for you.
 
-# bun
-bun run preview
-```
+## production / deployment
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+Check out the [Nuxt deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information on building and deploying. This project is currently configured for client-side-rendering (CSR) only so you can serve it or deploy it on any static hosting provider.

components/AppHeader.vue

@@ -25,12 +25,6 @@ const logout = async () => {
                     <div class="tooltip">projects</div>
                 </NuxtLink>
             </div>
-            <div v-if="loggedIn" class="link-btn">
-                <NuxtLink to="/dashboard">
-                    <Icon name="fa6-solid:chart-line" />
-                    <div class="tooltip">dashboard</div>
-                </NuxtLink>
-            </div>
         </div>
         <span v-if="projectStore.currentProject && loggedIn" class="splitter" />
         <div
@@ -52,18 +46,6 @@ const logout = async () => {
                     <div class="tooltip">codebook</div>
                 </NuxtLink>
             </div>
-            <div class="link-btn">
-                <NuxtLink to="/graph">
-                    <Icon name="fa6-solid:circle-nodes" />
-                    <div class="tooltip">graph</div>
-                </NuxtLink>
-            </div>
-            <div class="link-btn">
-                <NuxtLink to="/export">
-                    <Icon name="fa6-solid:file-export" />
-                    <div class="tooltip">export</div>
-                </NuxtLink>
-            </div>
         </div>
         <div class="spacer" />
         <div class="right-links links">

components/CodePanel.vue

@@ -54,7 +54,7 @@ const parsedCodes = computed(() => {
     codes.value.forEach((c) => {
         const newCode = { ...c }
         if (newCode.group) {
-            newCode.codes = []
+            newCode.children = []
         }
         codeMap.set(newCode.id, newCode)
     })
@@ -64,7 +64,7 @@ const parsedCodes = computed(() => {
         if (newCode.parent) {
             const parent = codeMap.get(newCode.parent)
             if (parent) {
-                parent.codes.push(newCode)
+                parent.children.push(newCode)
             }
         } else {
             rootItems.push(newCode)
@@ -262,7 +262,7 @@ async function handleEditSubmit() {
 
 async function handleDeleteSubmit() {
     if (contextMenuCode.value.group) {
-        if (contextMenuCode.value.codes.length > 0) {
+        if (contextMenuCode.value.children.length > 0) {
             alert('The group must be empty first before deleting')
             showDeleteModal.value = false
             return

components/CodePanelItem.vue

@@ -46,8 +46,8 @@ function onDrop(e, code) {
 
 function getAllChildren(code) {
     let children = []
-    if (code.group && code.codes.length > 0) {
-        for (const c of code.codes) {
+    if (code.group && code.children.length > 0) {
+        for (const c of code.children) {
             children.push(c)
             if (c.group) {
                 children = children.concat(getAllChildren(c))
@@ -95,7 +95,7 @@ function getAllChildren(code) {
                 {{ code.code }}
             </div>
             <div
-                v-if="code.group && code.codes.length > 0"
+                v-if="code.group && code.children.length > 0"
                 class="child-colors"
             >
                 <div
@@ -109,14 +109,14 @@ function getAllChildren(code) {
             </div>
         </div>
         <div
-            v-if="code.group && code.codes.length > 0 && groupOpen"
+            v-if="code.group && code.children.length > 0 && groupOpen"
             class="children-container"
         >
             <span class="left-bar" :style="{ left: `${10 + level * 15}px` }" />
             <div class="children">
                 <div v-if="groupOpen" class="children">
                     <CodePanelItem
-                        v-for="c in code.codes"
+                        v-for="c in code.children"
                         :key="c.id"
                         v-model:dragged-code="draggedCode"
                         v-model:drop-target="dropTarget"

components/CodesTab.vue

@@ -20,18 +20,6 @@ const elementWidth = computed(() => {
     return props.width / (props.columns + 1)
 })
 
-// function getCodesChildren(codes) {
-//     const children = []
-//     for (const code of codes) {
-//         if (!code.group) {
-//             children.push(code)
-//         } else if (code.group) {
-//             children.push(...getCodesChildren(code.codes))
-//         }
-//     }
-//     return children
-// }
-
 function getCodesGroupsByLevel(codes) {
     const groupsByLevelMap = new Map()
     let groups = codes.filter((code) => code.group)
@@ -40,7 +28,7 @@ function getCodesGroupsByLevel(codes) {
     while (groups.length > 0) {
         groupsByLevelMap.set(level, groups.length)
         for (const group of groups) {
-            nextLevelGroups.push(...group.codes.filter((code) => code.group))
+            nextLevelGroups.push(...group.children.filter((code) => code.group))
         }
         groups = nextLevelGroups
         nextLevelGroups = []

components/CodesTabGroup.vue

@@ -50,7 +50,7 @@ const props = defineProps({
         </div>
         <div v-if="code.group" class="children">
             <CodesTabGroup
-                v-for="(c, i) in code.codes"
+                v-for="(c, i) in code.children"
                 :key="c.id"
                 :code="c"
                 :depth="depth + 1"

components/DraggableContainer.vue

@@ -0,0 +1,70 @@
+<script setup>
+const selectedItems = ref([])
+const draggedItems = ref([])
+const dropTarget = ref(null)
+
+const emit = defineEmits(['onDrop', 'onContextMenu'])
+
+provide('selectedItems', selectedItems)
+provide('draggedItems', draggedItems)
+provide('dropTarget', dropTarget)
+
+const isDragOver = computed(() => dropTarget.value === 'root')
+
+function onDropRoot(event) {
+    if (draggedItems.value.length > 0) {
+        emit('onDrop', { items: draggedItems.value, target: 'root' })
+        draggedItems.value = []
+        dropTarget.value = null
+    }
+}
+
+watch(dropTarget, (value) => {
+    if (value !== null) {
+    }
+})
+
+window.addEventListener('drop', (e) => e.preventDefault())
+window.addEventListener('dragover', (e) => e.preventDefault())
+
+onBeforeUnmount(() => {
+    window.removeEventListener('drop', (e) => e.preventDefault())
+    window.removeEventListener('dragover', (e) => e.preventDefault())
+})
+
+function handleContextMenu(event) {
+    emit('onContextMenu', { event, target: 'root' })
+}
+
+function onDragEnter(event) {
+    event.preventDefault()
+    dropTarget.value = 'root'
+}
+
+function onDragLeave(event) {
+    event.preventDefault()
+    if (dropTarget.value === 'root') {
+        dropTarget.value = null
+    }
+}
+</script>
+
+<template>
+    <div
+        class="flex flex-col w-full h-full"
+        @drop.prevent="onDropRoot"
+        @contextmenu.prevent="handleContextMenu"
+        @dragover.prevent
+    >
+        <slot></slot>
+        <div
+            :class="['grow', { 'bg-sub-alt': isDragOver }]"
+            @dragenter="onDragEnter"
+            @dragleave="onDragLeave"
+        />
+    </div>
+</template>
+
+<style scoped>
+
+</style>