feat: add "new" btn + fix shared states

LoganTann · Jul 24, 2022 · cd3ed94 · cd3ed94
1 parent 2307ee7
commit cd3ed94
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 101 deletions.
diff --git a/assets/css/defs.scss b/assets/css/defs.scss
@@ -13,4 +13,13 @@
 }
 @mixin trs_use_selected_bg_color {
     background-color: rgba(55, 53, 47, 0.08);
+}
+@mixin tsr_use_file_btn_container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin: 4px;
+    border-radius: 2px;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Flex:[email protected]&display=swap');
+
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v26/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
+}
+
 html,
 body,
 #__nuxt {
@@ -6,13 +16,8 @@ body,
     height: 100%;
     width: 100%;
 }
-/* fallback */
-@font-face {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-weight: 100 700;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v26/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
-}
+
+
 
 .icon {
     font-family: 'Material Symbols Outlined';

diff --git a/components/trs/TrsBtnNewCategory.vue b/components/trs/TrsBtnNewCategory.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="trs_filename" @click="handleCreateFile">
+        <div class="trs_plusbtn">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+                <path
+                    d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"
+                />
+            </svg>
+        </div>
+        <input
+            v-show="creationStatus == 'editing'"
+            type="text"
+            v-model="btnName"
+            ref="newFilename"
+            class="newFileInput"
+            @keypress="handleKeyPress"
+            @focusout="handleUnfocus"
+        />
+        <span v-if="creationStatus == 'initial'">{{ btnName }}</span>
+        <span v-if="creationStatus == 'creating'">Création...</span>
+    </div>
+</template>
+<script setup lang="ts">
+import { PropType, Ref } from "vue";
+import { basicFileData } from "@/server/api/getDirectoryListing";
+
+const btnName = ref("Créer une nouvelle catégorie");
+const creationStatus = ref("initial");
+const newFilename: Ref<HTMLInputElement> = ref(null);
+
+const props = defineProps({
+    parentData: {
+        type: Object as PropType<basicFileData | null>,
+        required: false,
+        default: () => null,
+    },
+});
+if (props.parentData?.filename) {
+    btnName.value = `Nouv. page sur ${props.parentData.filename}`;
+}
+
+function handleCreateFile() {
+    if (creationStatus.value !== "initial") {
+        return;
+    }
+    creationStatus.value = "editing";
+    btnName.value = "nouv fichier";
+    nextTick(() => {
+        newFilename.value.focus();
+        newFilename.value.select();
+    });
+}
+function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+        newFilename.value.blur();
+    }
+}
+function handleUnfocus() {
+    creationStatus.value = "creating";
+}
+</script>
+<style lang="scss">
+@use "assets/css/defs.scss";
+.trs_plusbtn {
+    @include defs.tsr_use_file_btn_container;
+    @include defs.trs_use_filename_fill;
+}
+.trs_plusbtn svg {
+    width: 10px;
+    height: 10px;
+}
+.newFileInput {
+    @include defs.trs_use_selected_bg_color;
+}
+</style>
diff --git a/components/trs/TrsDirClickWatcher.vue b/components/trs/TrsDirClickWatcher.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="flex-1" data-do-stop-propagation="yes" @click="handleClick">
+        <slot></slot>
+    </div>
+</template>
+<script setup lang="ts">
+import { useReactiveGlobalState } from "@/stores/trsEditorFiles";
+import { trsGetActionByClickEvent } from "@/composables/trs/TrsDirClickWatcher";
+const state = useReactiveGlobalState();
+
+function handleClick(e: MouseEvent) {
+    const { action, details } = trsGetActionByClickEvent(e);
+
+    switch (action) {
+        case "expandFile":
+            toggleFileExpandingState(details);
+            break;
+        case "changeFile":
+            changeDoc(details);
+            break;
+        default:
+            console.log("Unhandled action", action, e);
+    }
+}
+
+function toggleFileExpandingState(docId: string) {
+    const fileAsNumber = parseInt(docId, 10);
+    if (state.openedIds.value.has(fileAsNumber)) {
+        state.openedIds.value.delete(fileAsNumber);
+    } else {
+        state.openedIds.value.add(fileAsNumber);
+    }
+}
+function changeDoc(docId: string) {
+    state.activeFile.value = parseInt(docId, 10);
+}
+</script>
diff --git a/components/trs/TrsDirExpandBtn.vue b/components/trs/TrsDirExpandBtn.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="trs_expandbtn"
-        @click="handleClick"
+        :data-do-expand-file="targetedFile.id"
         :class="{ active: expanded, empty: !targetedFile.hasChilds }"
     >
         <svg viewBox="0 0 100 100">
@@ -12,14 +12,9 @@
 <script setup lang="ts">
 import { basicFileData } from "@/server/api/getDirectoryListing";
 import { PropType } from "vue";
-import {
-    useGlobalState,
-    openedIds_add,
-    openedIds_has,
-    openedIds_remove,
-} from "@/stores/trsEditorFiles";
+import { useReactiveGlobalState } from "@/stores/trsEditorFiles";
 
-const state = useGlobalState();
+const state = useReactiveGlobalState();
 const props = defineProps({
     targetedFile: {
         type: Object as PropType<basicFileData>,
@@ -28,31 +23,19 @@ const props = defineProps({
     },
 });
 
-const expanded = computed(() => openedIds_has(state, props.targetedFile.id));
-
-function handleClick() {
-    if (expanded.value) {
-        openedIds_remove(state, props.targetedFile.id);
-    } else {
-        openedIds_add(state, props.targetedFile.id);
-    }
-}
+const expanded = computed(() =>
+    state.openedIds.value.has(props.targetedFile.id)
+);
 </script>
 
 <style lang="scss">
 @use "assets/css/defs.scss";
 
 .trs_expandbtn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    margin: 4px;
-    border-radius: 2px;
-    &:hover {
-        @include defs.trs_use_selected_bg_color;
-    }
+    @include defs.tsr_use_file_btn_container;
+}
+.trs_expandbtn:hover {
+    @include defs.trs_use_selected_bg_color;
 }
 .trs_expandbtn svg {
     width: 10px;

diff --git a/components/trs/TrsDirlisting.vue b/components/trs/TrsDirlisting.vue
@@ -4,12 +4,11 @@
             <!-- File Element -->
             <div
                 class="trs_filename"
-                :class="{ active: file.id === state.activeFile }"
+                :data-do-change-file="file.id"
+                :class="{ active: file.id === state.activeFile.value }"
             >
                 <trs-dir-expand-btn :targeted-file="file"></trs-dir-expand-btn>
-                <span @click="handleChangeDoc(file.id)">{{
-                    file.filename
-                }}</span>
+                <span>{{ file.filename }}</span>
             </div>
             <!-- Its childrens -->
             <trs-dirlisting
@@ -24,16 +23,13 @@
                 <span><span class="ml-4">*</span> Pas de fichiers enfants</span>
             </div>
         </div>
+        <trs-btn-new-category :parentData="parentData"></trs-btn-new-category>
     </div>
 </template>
 <script setup lang="ts">
 import { basicFileData } from "@/server/api/getDirectoryListing";
-import { PropType } from "vue";
-import {
-    useGlobalState,
-    openedIds_has,
-    openedIds_add,
-} from "@/stores/trsEditorFiles";
+import { PropType, Ref } from "vue";
+import { useReactiveGlobalState } from "@/stores/trsEditorFiles";
 
 const props = defineProps({
     parent: {
@@ -47,26 +43,38 @@ const props = defineProps({
         default: 0,
     },
 });
-const state = useGlobalState();
+
+const state = useReactiveGlobalState();
 
 // data :
 const filesInDir = ref([]);
+const parentData: Ref<basicFileData | null> = ref(null);
 const depthStyleDef = `--depth: ${props.depth * 10 + 5}px;`;
 
 function computeFilesInDir() {
-    filesInDir.value = state.value.allFiles
-        .filter((file) => file.parent === props.parent)
-        .sort((a, b) => a.filename.localeCompare(b.filename));
+    const _filesInDir = new Array();
+    for (const file of state.allFiles.value) {
+        if (file.parent === props.parent) {
+            _filesInDir.push(file);
+        }
+        if (file.id === props.parent) {
+            parentData.value = file;
+        }
+    }
+
+    filesInDir.value = _filesInDir.sort((a, b) =>
+        a.filename.localeCompare(b.filename)
+    );
 }
 computeFilesInDir();
 // watch allfiles
 watch(
-    () => state.value.allFiles,
+    () => state.allFiles.value,
     () => computeFilesInDir()
 );
 
 function getExpandingStatusOf(file: basicFileData) {
-    if (!openedIds_has(state, file.id)) {
+    if (!state.openedIds.value.has(file.id)) {
         return "closed";
     }
     if (file.hasChilds) {
@@ -75,17 +83,6 @@ function getExpandingStatusOf(file: basicFileData) {
         return "no files";
     }
 }
-
-function handleChangeDoc(id: number) {
-    state.value.activeFile = id;
-    console.log("active file changed", id);
-}
-function handleLeftClick(e: MouseEvent) {
-    console.log("e right", e);
-}
-function handleRightClick(e: MouseEvent) {
-    console.log("e left", e);
-}
 </script>
 
 <style lang="scss">
@@ -101,6 +98,7 @@ function handleRightClick(e: MouseEvent) {
     font-weight: 500;
     border-radius: 2px;
     padding-left: var(--depth);
+    cursor: pointer;
 
     & > span {
         padding-top: 2px;

diff --git a/components/trs/TrsEditorContainer.vue b/components/trs/TrsEditorContainer.vue
@@ -14,10 +14,10 @@
     </div>
 </template>
 <script setup lang="ts">
-import { useGlobalState } from "@/stores/trsEditorFiles";
+import { useReactiveGlobalState } from "@/stores/trsEditorFiles";
 import { articleContentGetReponse } from "@/server/api/articleContent/[id].get";
 
-const state = useGlobalState();
+const state = useReactiveGlobalState();
 
 const title = ref("Hello");
 const inHTML = ref("<p>Hello</p>");
@@ -26,7 +26,7 @@ const docId = ref(-1);
 // todo : abort controller instead
 const lastNewVal = ref(-1);
 watch(
-    () => state.value.activeFile,
+    () => state.activeFile.value,
     async (newVal) => {
         lastNewVal.value = newVal;
         const req = await fetch(`/api/articleContent/${newVal}`);

diff --git a/composables/trs/TrsDirClickWatcher.ts b/composables/trs/TrsDirClickWatcher.ts
@@ -0,0 +1,27 @@
+export function trsGetActionByClickEvent(event: MouseEvent): {
+    action: string;
+    details?: string;
+} {
+    let currentElement: HTMLElement = event.target as HTMLElement;
+    let action = "unknown";
+    let details: string | undefined = undefined;
+
+    while (currentElement) {
+        if (currentElement.dataset.doExpandFile) {
+            action = "expandFile";
+            details = currentElement.dataset.doExpandFile;
+            break;
+        }
+        if (currentElement.dataset.doChangeFile) {
+            action = "changeFile";
+            details = currentElement.dataset.doChangeFile;
+            break;
+        }
+        if (currentElement.dataset.doStopPropagation) {
+            action = "stopPropagation";
+            break;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return { action, details };
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -4,11 +4,5 @@ import { defineNuxtConfig } from "nuxt";
 export default defineNuxtConfig({
     modules: ["@nuxtjs/supabase", "@nuxtjs/tailwindcss"],
     components: true,
-    googleFonts: {
-        families: {
-            Roboto: true,
-            Lato: true,
-        },
-    },
     css: ["~/assets/css/main.css"],
 });