shared-ritm 1.1.8 → 1.1.10

package/src/common/app-layout/AppLayout.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-layout :class="$style.layout" view="lHh LpR fFf">
+    <!--    <div v-if="logged" :class="$style['loader-backdrop']">-->
+    <!--      <q-spinner size="md" color="white" :class="$style['loader-spinner']" />-->
+    <!--    </div>-->
+    <app-loader :loading="logged" size="md" :thickness="3" :backdrop="true" />
+    <slot name="drawer"></slot>
+    <slot name="header"></slot>
+    <q-page-container :class="{ container: container }" @wheel="mouseMove">
+      <q-page>
+        <slot></slot>
+
+        <slot name="page-bottom"></slot>
+      </q-page>
+    </q-page-container>
+
+    <slot name="footer"></slot>
+  </q-layout>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import AppLoader from '@/common/app-loader/index.vue'
+interface LayoutProps {
+  logged: boolean
+  console?: boolean
+  container?: boolean
+  padding?: string
+}
+
+const props = defineProps<LayoutProps>()
+
+function mouseMove(e: any) {
+  const content = document.getElementById('content')
+  const scrollable = e.target
+  if (content && !scrollable.closest('#content')) {
+    content.scrollBy({ top: e.deltaY })
+  }
+}
+</script>
+
+<style lang="scss" module>
+.layout {
+  position: relative;
+  background: linear-gradient(235deg, #87caff 9.16%, #5386d3 45.8%, #0b3f8e 92.27%);
+}
+//.loader {
+//  &-backdrop {
+//    width: 100%;
+//    height: 100%;
+//    background-color: rgba(255, 255, 255, 0.45);
+//    position: absolute;
+//    z-index: 9999;
+//  }
+//  &-spinner {
+//    position: absolute;
+//    top: 50%;
+//    left: 50%;
+//    z-index: 2;
+//  }
+//}
+</style>

package/src/common/app-layout/components/AppLayoutHeader.vue

@@ -0,0 +1,124 @@
+<template>
+  <q-header :class="[$style.header, { [$style[`header-full`]]: fullWidth }]">
+    <q-toolbar :class="$style.toolbar">
+      <!--      <app-input-search v-model.trim="text" type="text" label="Поиск по системе" :class="$style['header-search']" />-->
+      <div :class="$style['action-buttons']">
+        <slot name="filters-actions"></slot>
+      </div>
+
+      <div :class="$style['action-buttons']">
+        <slot name="action-buttons"></slot>
+
+        <app-button icon="person" text-color="black" :label="shortName" rounded :class="$style['button-person']" />
+        <!--        <app-button :class="$style.button" rounded>-->
+        <!--          <small-caps-icon />-->
+        <!--        </app-button>-->
+        <!--        <app-button :class="$style.button" rounded>-->
+        <!--          <search-status-icon />-->
+        <!--        </app-button>-->
+        <!--        <app-button @click="counter++" :class="$style.button" rounded :badge="`+${counter}`" badge-color="#3F8CFF">-->
+        <!--          <flash-icon />-->
+        <!--        </app-button>-->
+        <!--        <app-button :class="$style.button" rounded>-->
+        <!--          <notification-icon />-->
+        <!--        </app-button>-->
+      </div>
+    </q-toolbar>
+  </q-header>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue'
+//import AppInput from '@/common/app-input-search/AppInputSearch.vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+import { b } from 'vite/dist/node/types.d-aGj9QkWt'
+
+//import SmallCapsIcon from '@/icons/header/smallCapsIcon.vue'
+//import SearchStatusIcon from '@/icons/header/searchStatusIcon.vue'
+//import FlashIcon from '@/icons/header/flashIcon.vue'
+//import NotificationIcon from '@/icons/header/notificationIcon.vue'
+interface Props {
+  userData: any
+  fullWidth?: boolean
+}
+
+const props = defineProps<Props>()
+
+// const counter = ref(1)
+const shortName = computed(
+  () =>
+    `${props.userData?.last_name} ${props.userData?.first_name?.[0]}. ${props.userData?.patronymic?.[0] || ''} ${
+      props.userData?.patronymic?.[0] ? '.' : ''
+    }`,
+)
+</script>
+
+<style lang="scss" module>
+.header {
+  height: 100px;
+  background: transparent;
+  margin: 0 auto;
+  max-width: 1300px;
+}
+.header-full {
+  max-width: 100%;
+  padding: 0 20px;
+}
+.toolbar {
+  padding: 0;
+  min-height: 100%;
+}
+
+.header-search {
+  width: 412px;
+  font-size: 16px;
+}
+
+.action-buttons {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+  justify-content: end;
+}
+
+.button {
+  padding: 12px;
+  background: white;
+  transition: all 0.3s ease, color 0.3s ease;
+}
+
+.button-person {
+  padding: 10px 14px;
+  background: white;
+}
+
+@media (max-width: 1440px) {
+  .header {
+    height: 100px;
+    background: transparent;
+    margin: 0 auto;
+    max-width: 874px;
+  }
+  .header-search {
+    width: 343px;
+    font-size: 16px;
+  }
+  .action-buttons {
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+  .button {
+    padding: 10px;
+    background: white;
+    transition: all 0.3s ease, color 0.3s ease;
+  }
+  .button-person {
+    padding: 8px 10px;
+    background: white;
+  }
+}
+</style>

package/src/common/app-loader/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="{ 'loader-backdrop': backdrop && loading }">
+    <q-spinner v-if="loading" :size="size" class="loader-spinner" :thickness="thickness" />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  backdrop: boolean
+  loading: boolean
+  thickness: number
+  size: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  backdrop: false,
+  loading: false,
+  thickness: 2,
+  size: 'md',
+})
+
+// <app-loader :loading="logged" :backdrop="true" />
+</script>
+
+<style scoped lang="scss">
+.loader {
+  &-backdrop {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.45);
+    position: absolute;
+    z-index: 9999;
+  }
+  &-spinner {
+    position: absolute;
+    color: #3f8cff;
+    top: 44%;
+    left: 48%;
+    z-index: 9999;
+  }
+}
+</style>

package/src/common/app-page-layout/AppPageLayout.vue

@@ -0,0 +1,122 @@
+<template lang="pug">
+q-page#content(:class="$style['page-container']")
+  q-toolbar(:class="$style['toolbar']")
+    q-toolbar-title(:class="$style.title") {{ title }}
+    div(:class="$style['action-buttons']")
+      app-button(
+        rounded
+        :class="$style['button-new']"
+        :label="'Новый ремонт'"
+        @click="emits('create-repair')"
+        color="#fff"
+        icon="add"
+      )
+      app-button(rounded :class="$style['button-video-wall']" @click="emits('routing-to-video-wall')")
+        video-wall-icon
+        span Видеостена
+      app-button(rounded :class="$style.button" @click="openFullScreenWidgets")
+        q-tooltip на весь экран
+        q-icon(name="open_in_full")
+      //app-button(rounded :class="$style.button")
+      //  graph-icon
+      //app-button(rounded :class="$style.button")
+      //  time-line-icon
+  slot
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, defineAsyncComponent } from 'vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+import { useQuasar } from 'quasar'
+import VideoWallIcon from '@/icons/page-header/videoWallIcon.vue'
+
+const $q = useQuasar()
+
+const FullScreenDialog = defineAsyncComponent(() => import('@/components/dialogs/full-screen-widgets/index.vue'))
+// import GraphIcon from '@/icons/page-header/graphIcon.vue'
+// import TimeLineIcon from '@/icons/page-header/timeLineIcon.vue'
+interface Props {
+  title: string
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['create-repair', ''])
+
+const openFullScreenWidgets = () => {
+  $q.dialog({
+    component: FullScreenDialog,
+  })
+}
+</script>
+<style module lang="scss">
+.toolbar {
+  padding: 0;
+  margin-top: 16px;
+}
+.page-container {
+  padding: 0 4px 0 0;
+  max-width: 1300px;
+  margin: 0 auto;
+  max-height: 600px;
+  overflow: auto;
+  &::-webkit-scrollbar-thumb {
+    height: 88px;
+    background-color: #d3dbeb;
+    border-radius: 6px;
+  }
+}
+.button {
+  padding: 12px;
+  background: white;
+}
+
+.button-new {
+  padding: 12px 18px;
+  background: #3f8cff;
+}
+.button-video-wall {
+  padding: 10px 18px;
+  background: white;
+  span {
+    color: #3f8cff;
+    margin-left: 8px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
+.title {
+  color: #fff;
+  font-family: Montserrat, sans-serif;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.action-buttons {
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+}
+
+@media (max-width: 1440px) {
+  .page-container {
+    max-width: 874px;
+  }
+  .action-buttons {
+    column-gap: 8px;
+  }
+  .title {
+    font-size: 24px;
+    line-height: normal;
+  }
+  .button {
+    padding: 10px;
+    background: white;
+  }
+  .button-new {
+    padding: 10px 12px;
+    background: #3f8cff;
+  }
+}
+</style>

package/src/common/app-select/AppSelect.vue

@@ -0,0 +1,157 @@
+<template>
+  <q-select
+    ref="select"
+    v-model="selected"
+    :options="filteredOptions"
+    :option-value="optionValue"
+    :option-label="optionLabel"
+    emit-value
+    map-options
+    :disable="isDisabled"
+    :multiple="multiple"
+    outlined
+    stack-label
+    :use-input="search"
+    :class="[$style.select]"
+    :label="label"
+    input-debounce="100"
+    :popup-content-class="$style['app-select__menu']"
+    :clearable="clearable"
+    rounded
+    autocomplete=""
+    @filter="filterFn"
+  >
+    <template v-if="multiple" #selected-item="scope">
+      <q-chip
+        v-if="scope.opt"
+        removable
+        class="q-ma-none"
+        dense
+        :tabindex="scope.tabindex"
+        color="white"
+        text-color="secondary"
+        @remove="scope.removeAtIndex(scope.index)"
+      >
+        {{ scope.opt[`${optionLabel}`] }}
+      </q-chip>
+    </template>
+    <template #no-option>
+      <q-item>{{ emptyText }}</q-item>
+    </template>
+    <q-item v-if="!lcText && type()">{{ placeholder }}</q-item>
+  </q-select>
+</template>
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref, Ref } from 'vue'
+
+import { QSelect } from 'quasar'
+
+type Option = Record<string, any>
+
+interface AppQSelectProps {
+  modelValue: any
+  options: Option[]
+  placeholder: string
+  emptyText: string
+  optionLabel?: string
+  optionValue?: string
+  label?: string
+  multiple?: boolean
+  borderColor: string
+  isDisabled?: boolean
+  clearable?: boolean
+  search?: boolean
+}
+
+const props = defineProps<AppQSelectProps>()
+const select = ref({})
+const emit = defineEmits(['update:modelValue'])
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+const type = () => {
+  if (Array.isArray(selected.value) && !selected.value.length) return true
+  return typeof selected.value === 'string' && !selected.value
+}
+
+const lcText: Ref<string> = ref('')
+const filteredOptions = computed(() => {
+  return props.options.filter(x => x[props?.optionLabel || 'label'].toLowerCase().includes(lcText.value))
+})
+
+function filterFn(val: string, update: (arg0: () => void) => void) {
+  update(() => {
+    lcText.value = val.toLowerCase()
+  })
+}
+</script>
+<style module lang="scss">
+.wrap {
+  position: relative;
+
+  &:global(.--option-tree) {
+    cursor: pointer;
+  }
+}
+
+.select {
+  &:global(.q-field--outlined.q-field--rounded .q-field__control) {
+    border-radius: 14px;
+  }
+  &:global(.q-field--outlined .q-field__control:before) {
+    border-color: v-bind(borderColor);
+  }
+  &:global(.q-select .q-field__input) {
+    padding: 0 6px;
+  }
+  //&:global(.q-field--filled .q-field__control) {
+  //  //color: red;
+  //}
+  //&:global(.q-field--filled.q-field--focused .q-field__control) {
+  //}
+  //&:global(.q-field--filled .q-field__control:after) {
+  //  left: 8px;
+  //  right: 8px;
+  //}
+  &:global(.q-field--outlined .q-item) {
+    color: #1d1d1d;
+    position: absolute;
+    padding: 0 4px;
+    top: 18px;
+    left: 0;
+  }
+}
+
+.append-wrapper {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+}
+
+.menu-wrap {
+  padding: 8px;
+}
+
+.search-wrapper {
+  position: sticky;
+  top: 0;
+  padding: 4px;
+  background: var(--main-bg);
+  z-index: 1;
+}
+.app-select__menu {
+  border-radius: 14px;
+  .q-item__label {
+    word-break: break-word;
+  }
+  &:global(.q-menu) {
+    max-height: 200px !important;
+  }
+}
+</style>

package/src/common/app-sheet/AppSheet.vue

@@ -0,0 +1,114 @@
+<template>
+  <q-dialog
+    ref="DialogRef"
+    :model-value="true"
+    :position="'right'"
+    :class="$style['sheet-dialog']"
+    full-height
+    full-width
+  >
+    <template v-if="type === 'details'">
+      <q-card>
+        <div class="wrapper">
+          <div class="sheet-header">
+            <h2>{{ title }}</h2>
+            <div class="close-button">
+              <q-btn v-close-popup dense flat icon="close" />
+            </div>
+          </div>
+          <div v-if="loading" class="loader">
+            <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
+          </div>
+          <slot v-else />
+        </div>
+      </q-card>
+    </template>
+    <template v-if="type === 'custom'">
+      <div v-if="loading" class="custom-wrapper">
+        <div class="loader">
+          <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
+        </div>
+      </div>
+      <slot v-else />
+    </template>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+interface DialogProps {
+  dialogRef: any
+  loading?: boolean
+  title?: string
+  width?: string
+  type?: 'details' | 'custom'
+  tabs?: any[]
+  currentTabName?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: '',
+  width: '976px',
+  type: 'details',
+  loading: false,
+  tabs: () => [],
+  currentTabName: '',
+})
+
+const emit = defineEmits(['update:dialogRef', 'update:currentTabName'])
+
+const DialogRef = computed({
+  get() {
+    return props.dialogRef
+  },
+  set(value) {
+    emit('update:dialogRef', value)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-wrapper {
+  width: v-bind(width);
+  background-color: white;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: v-bind(width);
+  height: 100vh;
+  min-height: 100vh;
+  position: relative;
+  padding: 2rem 2rem 4rem 2rem;
+  background-color: #7991ad32;
+  font-family: 'NunitoSansFont', sans-serif;
+}
+
+.sheet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h2 {
+    font-size: 36px;
+  }
+}
+.loader {
+  min-width: 976px;
+  &-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 4;
+  }
+}
+</style>
+
+<style lang="scss" module>
+.sheet-dialog {
+  :global(.q-dialog__inner--minimized) {
+    padding: 0;
+  }
+}
+</style>