init

app/components/baseHeader.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup="">
+
+import IconLogo from "~/components/icons/iconLogo.vue";
+import {Button} from "~/components/ui/Buttons";
+import {ButtonKind} from "~/components/ui/Buttons/constants.buttons";
+import {EDITOR_KEY} from "~/shared/constants";
+import type {Editor} from "@tiptap/vue-3";
+import type {MaterialSendDto} from "~/stores/materials/types.materials";
+import dayjs from "dayjs";
+import {useMaterialsStore} from "~/stores/materials/useMaterialsStore";
+
+const router = useRouter()
+const route = useRoute()
+const editor = inject<Ref<Editor | null>>(EDITOR_KEY)
+
+const isLoadingSave = ref(false);
+const materialsStore = useMaterialsStore()
+
+const isntMaterialCreatePage = computed(() => route.name !== 'materials-create')
+const getButtonKind = computed(() => {
+  if (route.name === 'materials-create') return ButtonKind.Send
+
+  return ButtonKind.CreateMaterial
+})
+
+const onClick = () => {
+  if (isntMaterialCreatePage.value) {
+    router.push({name: 'materials-create'})
+    return;
+  }
+  prepareEditorData()
+}
+
+const prepareEditorData = async() => {
+  const json = editor?.value?.getJSON()
+  const html = editor?.value?.getHTML()
+  if (!json || !html) return;
+  const title = json.content?.find(el => el.type === 'heading' && el.attrs?.level === 1)?.content?.[0]?.text
+  const shortDescription = json.content?.find(el => el.type === 'paragraph')?.content?.[0]?.text
+  const sendData: MaterialSendDto = {
+    title,
+    short_description: shortDescription,
+    datetime: dayjs().format('YYYY-MM-DDTHH:mm:ss.sssZ'),
+    description_json: json,
+    description_html: html
+
+  }
+  try {
+    isLoadingSave.value = true
+    const {data,error} = await useFetch('/api/save', {
+      method: 'POST',
+      body: sendData
+    })
+    if (data.value) {
+      router.push({name: 'materials-id', params: {id: data.value.id}})
+    }
+  } catch {
+
+  } finally {
+    isLoadingSave.value = false
+  }
+
+}
+
+</script>
+
+<template>
+  <div class="bg-header">
+    <div class="header">
+      <NuxtLink to="/" class="link">
+        <IconLogo class="icon" />
+      </NuxtLink>
+      <div>
+        <Button.ButtonDefault :kind="getButtonKind" @click="onClick" :loading="isLoadingSave" />
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+.header {
+  max-width: 1224px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 36px;
+  background: #fff;
+  align-items: center;
+}
+
+.icon {
+  height: 44px;
+  width: 115px;
+  color: var(--text-blue);
+}
+
+.bg-header {
+  background: #fff;
+  width: 100dvw;
+}
+
+.link {
+  line-height: 80%;
+}
+
+@media screen and (max-width: 768px) {
+  .header {
+    padding: 8px 16px;
+  }
+  .icon {
+    height: 36px;
+    width: 93px;
+  }
+}
+</style>