sprof 0.0.1

package/src/classes/page/Page.ts

@@ -0,0 +1,160 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import Contact from '@/classes/Contact';
+import FileInfo from '@/classes/FileInfo';
+import CustomSection from '@/classes/page/CustomSection';
+import PageDocument from '@/classes/page/PageDocument';
+import PageImage from '@/classes/page/PageImage';
+import PageSection from '@/classes/page/PageSection';
+import PageSideMenu from '@/classes/page/PageSideMenu';
+import Role from '@/classes/Role';
+import ClassHelper from '@/services/ClassHelper';
+
+export default class Page {
+  id?: string;
+  title = '';
+  content = '';
+  slug = '';
+  pagesGroup = 'Без группы';
+  link = '';
+  withComments = false;
+  showContacts = false;
+  collaps = false;
+  showContent = false;
+  @ClassHelper.GetClassConstructor(PageImage)
+  pageImages: PageImage[] = [];
+  pageImagesForDelete: string[] = [];
+  pageImagesNames: string[] = [];
+
+  @ClassHelper.GetClassConstructor(PageSideMenu)
+  pageSideMenus: PageSideMenu[] = [];
+  menus: PageSideMenu[] = [];
+  pageSideMenusForDelete: string[] = [];
+
+  @ClassHelper.GetClassConstructor(PageSection)
+  pageSections: PageSection[] = [];
+  pageSectionsForDelete: string[] = [];
+  @ClassHelper.GetClassConstructor(PageDocument)
+  pageDocuments: PageDocument[] = [];
+  // @ClassHelper.GetClassConstructor(PageComment)
+  // pageComments: PageComment[] = [];
+  contact: Contact = new Contact();
+  contactId?: string;
+  role: Role = new Role();
+  roleId?: string;
+
+  //
+  filterStr = '';
+  activeMenuId = '';
+
+  constructor(i?: Page) {
+    ClassHelper.BuildClass(this, i);
+    this.menus = this.pageSideMenus;
+  }
+
+  getActiveMenu(): PageSideMenu {
+    const activeMenu = this.pageSideMenus.find((p: PageSideMenu) => p.id === this.activeMenuId);
+    if (!activeMenu) {
+      return this.pageSideMenus[0];
+    }
+    return activeMenu;
+  }
+
+  setActiveMenuId(id: string) {
+    this.activeMenuId = id;
+  }
+
+  getLink(): string {
+    if (this.slug !== '') {
+      return `/pages/${this.slug}`;
+    }
+    return '404';
+  }
+
+  getFileInfos(): FileInfo[] {
+    const fileInfos: FileInfo[] = [];
+    this.pageSideMenus.forEach((item: PageSideMenu) => {
+      fileInfos.push(...item.getFileInfos());
+    });
+    this.pageDocuments.forEach((pageDocument: PageDocument) => {
+      if (pageDocument.document.scan) {
+        fileInfos.push(pageDocument.document.scan);
+      }
+    });
+    this.pageImages.forEach((pageImage: PageImage) => {
+      if (pageImage.fileInfo) {
+        fileInfos.push(pageImage.fileInfo);
+      }
+    });
+    return fileInfos;
+  }
+
+  addSideMenu(): string {
+    const menu = new PageSideMenu();
+    menu.order = this.pageSideMenus.length + 1;
+    menu.name = `Новое меню ${menu.order}`;
+    menu.id = uuidv4();
+    this.pageSideMenus.push(menu);
+    return menu.id;
+  }
+
+  selectSideMenu(value: string, isId: boolean): void {
+    if (!value && this.pageSideMenus.length > 0) {
+      this.pageSideMenus[0].selected = true;
+      return;
+    }
+    this.pageSideMenus.forEach((m: PageSideMenu) => {
+      if (isId) {
+        m.selected = m.id === value;
+      } else {
+        m.selected = m.slug === value;
+      }
+    });
+  }
+
+  getSelectedSideMenu(): PageSideMenu {
+    const selectedMenu = this.pageSideMenus.find((m: PageSideMenu) => m.selected);
+    return selectedMenu ? selectedMenu : new PageSideMenu();
+  }
+  //
+  addCustomSectionsToSideMenu(customSections: CustomSection[]): void {
+    customSections.forEach((c: CustomSection) => {
+      const menu = new PageSideMenu();
+      menu.id = c.id;
+      menu.name = c.name;
+      if (typeof c.order !== 'undefined') {
+        this.pageSideMenus.splice(c.order, 0, menu);
+      } else {
+        this.pageSideMenus.push(menu);
+      }
+    });
+  }
+  //
+  getPageSideMenus(): PageSideMenu[] {
+    if (this.showContacts && !this.pageSideMenus.find((el) => el.id === 'contacts')) {
+      const contactSideMenu = new PageSideMenu();
+      contactSideMenu.id = 'contacts';
+      contactSideMenu.name = 'Контакты';
+      this.pageSideMenus.push(contactSideMenu);
+    }
+    if (this.filterStr === '') {
+      return this.pageSideMenus;
+    }
+
+    // return this.pageSideMenus.filter((p: PageSideMenu) => p.name.includes(this.filterStr));
+    return this.pageSideMenus.filter((p: PageSideMenu) => p.infoExists(this.filterStr));
+  }
+
+  filter(): void {
+    if (this.filterStr === '') {
+      this.menus = this.pageSideMenus;
+    } else {
+      this.menus = this.pageSideMenus.filter((p: PageSideMenu) => p.infoExists(this.filterStr));
+    }
+    this.menus.forEach((m: PageSideMenu) => m.filter(this.filterStr));
+  }
+
+  static GetClassName(): string {
+    return 'page';
+  }
+}

package/src/classes/page/PageDocument.ts

@@ -0,0 +1,27 @@
+import FileInfo from '@/classes/FileInfo';
+import PageSection from '@/classes/page/PageSection';
+import ClassHelper from '@/services/ClassHelper';
+
+export default class PageDocument {
+  id?: string;
+  document: PageSection = new PageSection();
+  documentId?: string;
+  pageId?: string;
+
+  constructor(i?: PageDocument) {
+    ClassHelper.BuildClass(this, i);
+  }
+
+  static GetFileInfos(items: PageDocument[]): FileInfo[] {
+    const fileInfos: FileInfo[] = [];
+
+    items.forEach((i: PageDocument) => {
+      const fileInfo = i.document.scan;
+      if (fileInfo) {
+        fileInfos.push(fileInfo);
+      }
+    });
+
+    return fileInfos;
+  }
+}

package/src/classes/page/PageImage.ts

@@ -0,0 +1,15 @@
+import FileInfo from '@/classes/FileInfo';
+import ClassHelper from '@/services/ClassHelper';
+
+export default class PageImage {
+  id?: string;
+  pageId?: string;
+  fileInfoId?: string;
+  @ClassHelper.GetClassConstructor(FileInfo)
+  fileInfo?: FileInfo;
+  description?: string;
+
+  constructor(i?: PageImage) {
+    ClassHelper.BuildClass(this, i);
+  }
+}

package/src/classes/page/PageSection.ts

@@ -0,0 +1,82 @@
+import FileInfo from '@/classes/FileInfo';
+import PageSectionDocument from '@/classes/page/PageSectionDocument';
+import PageSectionImage from '@/classes/PageSectionImage';
+import ClassHelper from '@/services/ClassHelper';
+import Strings from '@/services/Strings';
+
+export default class PageSection {
+  id?: string;
+  name = '';
+  singleScan = false;
+  scan?: FileInfo;
+  scanId?: string;
+  order = 0;
+  description = '';
+  scans: FileInfo[] = [];
+  scansForDelete: string[] = [];
+  @ClassHelper.GetClassConstructor(PageSectionDocument)
+  pageSectionDocuments: PageSectionDocument[] = [];
+  pageSectionDocumentsForDelete: string[] = [];
+  @ClassHelper.GetClassConstructor(PageSectionImage)
+  pageSectionImages: PageSectionImage[] = [];
+  pageSectionImagesForDelete: string[] = [];
+
+  // pageSideMenu: IPageSideMenu = new PageSideMenu();
+  pageSideMenuId?: string;
+  pageId?: string;
+
+  text = '';
+  documents: PageSectionDocument[] = [];
+
+  constructor(i?: PageSection) {
+    ClassHelper.BuildClass(this, i);
+
+    this.documents = this.pageSectionDocuments;
+    this.text = this.description.replace('<p>undefined</p>', '');
+  }
+
+  addDocument(): void {
+    const newDoc = new PageSectionDocument();
+    newDoc.order = this.pageSectionDocuments.length - 1;
+    this.pageSectionDocuments.push(newDoc);
+  }
+
+  getFileInfos(): FileInfo[] {
+    const fileInfos: FileInfo[] = [];
+    this.pageSectionDocuments.forEach((i: PageSectionDocument) => {
+      fileInfos.push(...i.getFileInfos());
+    });
+    return fileInfos;
+  }
+
+  infoExists(filterStr: string): boolean {
+    const nameEq = Strings.SearchIn(this.name, filterStr);
+    const descriptionEq = Strings.SearchIn(this.description, filterStr);
+    const docEq = this.getDocuments(filterStr);
+    return nameEq || descriptionEq || docEq.length > 0;
+  }
+
+  getDocuments(filterStr: string): PageSectionDocument[] {
+    return this.pageSectionDocuments.filter((p: PageSectionDocument) => Strings.SearchIn(p.name, filterStr));
+  }
+
+  getDescription(filterStr: string): string {
+    if (!filterStr) {
+      return this.description;
+    }
+    const wrapped = Strings.WrapSubStr(this.description, filterStr);
+    return wrapped;
+  }
+
+  filter(filterStr: string) {
+    if (!filterStr) {
+      this.text = this.description;
+      this.documents = this.pageSectionDocuments;
+      return;
+    }
+
+    this.text = Strings.SearchIn(this.description, filterStr) ? Strings.WrapSubStr(this.description, filterStr) : '';
+    this.documents = this.pageSectionDocuments.filter((p: PageSectionDocument) => Strings.SearchIn(p.name, filterStr));
+    // const wrapped = Strings.WrapSubStr(this.description, filterStr)
+  }
+}

package/src/classes/page/PageSectionDocument.ts

@@ -0,0 +1,56 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import FileInfo from '@/classes/FileInfo';
+import IFile from '@/interfaces/IFile';
+
+export default class PageSectionDocument {
+  id?: string;
+  name = '';
+  order = 0;
+  downloadToFile = false;
+  pageSectionId?: string;
+  // pageSection: IPageSection = new PageSection();
+
+  scan: FileInfo = new FileInfo();
+  scanId?: string;
+
+  constructor(i?: PageSectionDocument) {
+    if (!i) {
+      return;
+    }
+    this.id = i?.id;
+    this.name = i.name;
+    this.order = i.order;
+    this.downloadToFile = i.downloadToFile;
+    this.pageSectionId = i.pageSectionId;
+    // if (i.pageSection) {
+    //   this.pageSection = new PageSection(i.pageSection);
+    // }
+    if (i.scan) {
+      this.scan = new FileInfo(i.scan);
+    }
+    this.scanId = i.scanId;
+  }
+
+  getFileInfos(): FileInfo[] {
+    return [this.scan];
+  }
+
+  uploadScan(file: IFile): FileInfo {
+    if (!this.scan.id) {
+      this.scan.id = uuidv4();
+    }
+    this.scan.originalName = file.name;
+    this.scan.file = file.raw;
+    this.scan.fileSystemPath = uuidv4();
+    this.scan.url = file.url;
+    return this.scan;
+  }
+
+  getFileName(): string {
+    if (this.name) {
+      return this.name;
+    }
+    return this.scan.originalName;
+  }
+}

package/src/classes/page/PageSideMenu.ts

@@ -0,0 +1,74 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import FileInfo from '@/classes/FileInfo';
+import PageSection from '@/classes/page/PageSection';
+import ClassHelper from '@/services/ClassHelper';
+import Strings from '@/services/Strings'
+
+export default class PageSideMenu {
+  id?: string;
+  name = 'Новое меню';
+  order = 0;
+  description = '';
+  routeAnchor = '';
+  slug = '';
+  @ClassHelper.GetClassConstructor(PageSection)
+  pageSections: PageSection[] = [];
+  pageSectionsForDelete: string[] = [];
+  showContent = false;
+
+  pageId?: string;
+
+  selected = false;
+
+  sections: PageSection[] = []
+  text = ''
+  constructor(i?: PageSideMenu) {
+    ClassHelper.BuildClass(this, i);
+
+    this.sections = this.pageSections
+    this.text = this.description.replace("<p>undefined</p>", "")
+  }
+
+  getFileInfos(): FileInfo[] {
+    const fileInfos: FileInfo[] = [];
+    this.pageSections.forEach((i: PageSection) => {
+      fileInfos.push(...i.getFileInfos());
+    });
+    return fileInfos;
+  }
+
+  addPageSection(): void {
+    const section = new PageSection();
+    section.order = this.pageSections.length + 1;
+    section.name = `Новой раздел ${section.order}`;
+    section.id = uuidv4();
+    this.pageSections.push(section);
+  }
+
+  infoExists(filterStr: string): boolean {
+    const nameEq = Strings.SearchIn(this.name, filterStr)
+    const descriptionEq = Strings.SearchIn(this.description, filterStr)
+    const sectionExists = this.getPageSections(filterStr).length > 0
+
+    return nameEq || descriptionEq || sectionExists
+  }
+
+  getPageSections(filterStr: string): PageSection[] {
+    if (!filterStr.length) {
+      return this.pageSections
+    }
+    return this.pageSections.filter((p: PageSection) => p.infoExists(filterStr))
+  }
+
+  filter(filterStr: string) {
+    if (!filterStr.length) {
+      this.sections = this.pageSections
+      this.text = this.description
+    } else {
+      this.sections = this.pageSections.filter((p: PageSection) => p.infoExists(filterStr))
+      this.text = Strings.SearchIn(this.description, filterStr) ? Strings.WrapSubStr(this.description, filterStr) : ''
+    }
+    this.sections.forEach((p: PageSection) => p.filter(filterStr))
+  }
+}

package/src/components/AdaptiveContainer.vue

@@ -0,0 +1,154 @@
+<template>
+  <slot name="main" />
+  <div v-if="mounted" class="mainblock">
+    <div
+      class="mainblock-left"
+      :style="{
+        minWidth: mobileWindow ? '100%' : menuWidth,
+        maxWidth: mobileWindow ? '100%' : menuWidth,
+        marginLeft: mobileWindow ? '-110%' : '0',
+        position: mobileWindow ? 'fixed' : 'relative',
+        top: mobileWindow ? '140px' : '',
+      }"
+    >
+      <div
+        class="left-menu"
+        :style="{
+          minWidth: mobileWindow ? 'auto' : menuWidth,
+          boxShadow: mobileWindow ? '0 0px 10px 0px rgba(0 0 0 / 20%)' : '',
+          marginLeft: !collapsed && mobileWindow ? '110%' : '0',
+          borderTopLeftRadius: !mobileWindow ? '' : '0',
+          borderBottomLeftRadius: !mobileWindow ? '' : '0',
+        }"
+        @click="handClick()"
+      >
+        <slot name="menu" />
+      </div>
+    </div>
+    <div class="mainblock-right">
+      <div class="title">
+        <div
+          class="icon"
+          :style="{
+            display: mobileWindow ? 'flex' : 'none',
+          }"
+          @click="handClick()"
+        >
+          <slot name="icon" />
+        </div>
+        <slot name="title" />
+      </div>
+
+      <div class="body">
+        <slot name="body" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  menuWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '0px',
+  },
+  mobileWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '1330px',
+  },
+});
+const mounted = ref(false);
+const collapsed: Ref<boolean> = ref(true);
+const mobileWindow = ref(window.matchMedia('(max-width: 1330px)').matches);
+
+const handClick = () => {
+  collapsed.value = !collapsed.value;
+};
+
+onBeforeMount(async () => {
+  window.addEventListener('resize', () => {
+    switch (props.mobileWidth) {
+      case '1330px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
+      case '1024px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1024px)').matches);
+      case '768px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 768px)').matches);
+    }
+    return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
+  });
+  mounted.value = true;
+});
+</script>
+
+<style lang="scss" scoped>
+.mainblock {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: auto;
+}
+
+.mainblock-left {
+  position: relative;
+  display: flex;
+  justify-content: left;
+  margin-right: 30px;
+  height: 100%;
+  left: 0px;
+  z-index: 10;
+}
+
+.left-menu {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  max-height: 70vh;
+  transition: 0.3s;
+  overflow: hidden;
+  overflow-y: auto;
+  background: #ffffff;
+}
+
+.mainblock-right {
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+}
+
+.title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 16px;
+  justify-content: center;
+  align-items: center;
+}
+
+.body {
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .title {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .title {
+    font-size: 16px;
+  }
+}
+</style>