shared-ritm 1.0.23 → 1.0.24

package/dist/types/index.d.ts

@@ -1,14 +1,17 @@
 import AppButton from '@/common/app-button/AppButton.vue';
+import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue';
 import AppInput from '@/common/app-input/AppInput.vue';
+import AppToggle from '@/common/app-toggle/index.vue';
 import AppLayout from '@/common/app-layout/AppLayout.vue';
 import AppSelect from '@/common/app-select/AppSelect.vue';
 import AppWrapper from '@/common/app-wrapper/AppWrapper.vue';
+import AppSidebar from '@/common/app-sidebar/AppSidebar.vue';
 import useGanttService from '@/api/services/GanttService';
 import useMetricsService from '@/api/services/MetricsService';
 import useProjectsService from '@/api/services/ProjectsService';
 import useRepairsService from '@/api/services/RepairsService';
 import useTasksService from '@/api/services/TasksService';
-export { AppButton, AppInput, AppLayout, AppSelect, AppWrapper };
+export { AppButton, AppInput, AppToggle, AppInputSearch, AppLayout, AppSelect, AppWrapper, AppSidebar };
 export { useGanttService, useMetricsService, useProjectsService, useRepairsService, useTasksService };
 export * from '@/api/types/Api_Repairs';
 export * from '@/api/types/Api_Tasks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shared-ritm",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "private": false,
   "files": [
     "dist",

package/src/App.vue

@@ -1,8 +1,12 @@
 <template>
   <app-button label="asad" color="primary" />
+  <app-input v-model="test" type="text" />
 </template>
 
 <script setup lang="ts">
 import AppButton from '@/common/app-button/AppButton.vue'
+import AppInput from '@/common/app-input/AppInput.vue'
+import { ref } from 'vue'
+const test = ref('sdf')
 </script>
 <style lang="scss"></style>

package/src/common/app-icon/AppIcon.vue

@@ -0,0 +1,105 @@
+<template>
+  <component :is="sideBarIcon" :tag="tag" :class="[$style['app-icon']]" />
+</template>
+
+<script setup lang="ts">
+import ProjectsIcon from '@/icons/sidebar/projects-icon.vue'
+import RepairsIcon from '@/icons/sidebar/repairs-icon.vue'
+import InstrumentHistoryIcon from '@/icons/sidebar/instrument-history-icon.vue'
+import RepairObjectIcon from '@/icons/sidebar/repair-object-icon.vue'
+import StatusHistoryIcon from '@/icons/sidebar/status-history-icon.vue'
+import PassIcon from '@/icons/sidebar/pass-icon.vue'
+import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
+import UsersIcon from '@/icons/sidebar/users-icon.vue'
+import UserIcon from '@/icons/sidebar/user-icon.vue'
+import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
+import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
+import LogoIcon from '@/icons/sidebar/logo-icon.vue'
+import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
+import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
+import OrderIcon from '@/icons/sidebar/order-icon.vue'
+import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
+import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
+import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
+import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
+import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
+import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
+import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
+import RolesIcon from '@/icons/sidebar/roles-icon.vue'
+import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
+import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
+import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
+import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
+import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
+import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
+import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
+import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
+
+import { computed, defineProps } from 'vue'
+import { NamedColor } from 'quasar/dist/types/api'
+
+interface Props {
+  size?: string | undefined
+  tag?: string | undefined
+  name: string
+  color?: NamedColor | undefined
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: '',
+  name: '',
+})
+
+function toPascalCase(str: string): string {
+  if (!str) return ''
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('')
+}
+const sideBarIcon = computed(
+  () =>
+    ({
+      ProjectsIcon,
+      RepairsIcon,
+      RepairObjectIcon,
+      InstrumentHistoryIcon,
+      StatusHistoryIcon,
+      PassIcon,
+      AssignModuleIcon,
+      UsersIcon,
+      UserIcon,
+      WorkzonesIcon,
+      LogoutIcon,
+      LogoIcon,
+      TasksIcon,
+      InstrumentsIcon,
+      OrderIcon,
+      ModulesIcon,
+      NotificationsIcon,
+      VideozonesIcon,
+      InstrumentWorkZoneIcon,
+      WorkshopIcon,
+      WarehousesIcon,
+      TeamsIcon,
+      RolesIcon,
+      PositionsIcon,
+      InstrumentOrderIcon,
+      PreorderIcon,
+      VideowallIcon,
+      VideosourcesIcon,
+      Tasks_tasksIcon,
+      Tasks_todayIcon,
+      ArrowFrameIcon,
+    }[toPascalCase(props.name)]),
+)
+</script>
+
+<style module lang="scss">
+.app-icon {
+  stroke: v-bind(color);
+  fill: none;
+  width: v-bind(size);
+  height: v-bind(size);
+}
+</style>

package/src/common/app-input/AppInput.vue

@@ -1,37 +1,19 @@
 <template>
   <q-input
     v-model="value"
+    :class="inputClasses"
     standout
     outlined
-    clearable
     dense
-    bg-color="white"
-    :class="[$style['app-input'], itemClasses]"
-    :type="type"
+    :type="inputType"
+    autocomplete="h87h58g7h8hd"
     :readonly="readonly || field"
-    :placeholder="label"
   >
-    <template #prepend>
-      <q-icon>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <path
-            d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-            stroke="#404650"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path d="M22 22L20 20" stroke="#3F8CFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-      </q-icon>
-    </template>
   </q-input>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, computed, withDefaults } from 'vue'
-
-import { ValidationRule, VueClassProp, VueStyleProp } from 'quasar/dist/types/api'
+import { defineProps, defineEmits, computed, ref, withDefaults } from 'vue'
 
 interface AppQInputProps {
   name?: string | undefined
@@ -43,7 +25,7 @@ interface AppQInputProps {
   error?: boolean | undefined
   errorMessage?: string | undefined
   noErrorIcon?: boolean | undefined
-  rules?: ValidationRule[] | undefined
+  rules?: any | undefined
   reactiveRules?: boolean | undefined
   lazyRules?: boolean | 'ondemand' | undefined
   label?: string | undefined
@@ -62,7 +44,6 @@ interface AppQInputProps {
   filled?: boolean | undefined
   outlined?: boolean | undefined
   borderless?: boolean | undefined
-  bordered?: boolean | undefined
   standout?: boolean | string | undefined
   labelSlot?: boolean | undefined
   bottomSlots?: boolean | undefined
@@ -93,8 +74,8 @@ interface AppQInputProps {
   debounce?: string | number | undefined
   maxlength?: string | number | undefined
   autogrow?: boolean | undefined
-  inputClass?: VueClassProp | undefined
-  inputStyle?: VueStyleProp | undefined
+  inputClass?: any | undefined
+  inputStyle?: any | undefined
   onClear?: (value: any) => void
   'onUpdate:modelValue'?: (value: string | number | null) => void
   onFocus?: (evt: Event) => void
@@ -107,14 +88,8 @@ interface AppInputProps extends AppQInputProps {
   required?: boolean
   datePicker?: boolean
   timePicker?: boolean
-  dateLocale?: any
   withIcon?: boolean
-  iconName?: string
-  iconColor?: string
   withButton?: boolean
-  buttonIcon?: string
-  buttonTooltip?: string
-  clearTooltip?: string
   withArrow?: boolean
 }
 
@@ -126,6 +101,11 @@ const props = withDefaults(defineProps<AppInputProps>(), {
 })
 
 const emit = defineEmits(['update:modelValue', 'button-click', 'clear', 'focus', 'blur', 'click'])
+const passwordVisibility = ref(false)
+const inputType = computed(() => {
+  if (props.type === 'password') return passwordVisibility.value ? 'text' : 'password'
+  return props.type || 'text'
+})
 
 const value = computed({
   get: () =>
@@ -135,34 +115,14 @@ const value = computed({
   set: (newValue: any) => emit('update:modelValue', props.type === 'number' ? +newValue : newValue),
 })
 
-const itemClasses = computed(() => ({
-  '--dense': props.dense,
-  '--bordered': props.bordered,
-}))
+const inputClasses = computed(() => {
+  return {
+    'app-input': true,
+    '--required': props.required,
+    '--field': props.field,
+    'input-number-without-arrow': inputType.value === 'number' && !props.withArrow,
+  }
+})
 </script>
 
-<style lang="scss" module>
-.app-input {
-  &:global(.q-field--outlined .q-field__control) {
-    border-radius: 14px;
-    height: 48px;
-    align-items: center;
-    padding: 0 16px;
-    color: #87caff;
-  }
-  :global(.q-field__control-container) {
-    margin-left: 8px;
-  }
-}
-@media (max-width: 1440px) {
-  .app-input {
-    &:global(.q-field--outlined .q-field__control) {
-      height: 40px;
-      padding: 0 12px;
-    }
-    :global(.q-field__control-container) {
-      margin-left: 6px;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/src/common/app-input-search/AppInputSearch.vue

@@ -0,0 +1,168 @@
+<template>
+  <q-input
+    v-model="value"
+    standout
+    outlined
+    clearable
+    dense
+    bg-color="white"
+    :class="[$style['app-input'], itemClasses]"
+    :type="type"
+    :readonly="readonly || field"
+    :placeholder="label"
+  >
+    <template #prepend>
+      <q-icon>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+            stroke="#404650"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path d="M22 22L20 20" stroke="#3F8CFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits, computed, withDefaults } from 'vue'
+
+import { ValidationRule, VueClassProp, VueStyleProp } from 'quasar/dist/types/api'
+
+interface AppQInputProps {
+  name?: string | undefined
+  mask?: string | undefined
+  fillMask?: boolean | string | undefined
+  reverseFillMask?: boolean | undefined
+  unmaskedValue?: boolean | undefined
+  modelValue: string | number | null | undefined
+  error?: boolean | undefined
+  errorMessage?: string | undefined
+  noErrorIcon?: boolean | undefined
+  rules?: ValidationRule[] | undefined
+  reactiveRules?: boolean | undefined
+  lazyRules?: boolean | 'ondemand' | undefined
+  label?: string | undefined
+  stackLabel?: boolean | undefined
+  hint?: string | undefined
+  hideHint?: boolean | undefined
+  prefix?: string | undefined
+  suffix?: string | undefined
+  labelColor?: string | undefined
+  color?: string | undefined
+  bgColor?: string | undefined
+  dark?: boolean | undefined
+  loading?: boolean | undefined
+  clearable?: boolean | undefined
+  clearIcon?: string | undefined
+  filled?: boolean | undefined
+  outlined?: boolean | undefined
+  borderless?: boolean | undefined
+  bordered?: boolean | undefined
+  standout?: boolean | string | undefined
+  labelSlot?: boolean | undefined
+  bottomSlots?: boolean | undefined
+  hideBottomSpace?: boolean | undefined
+  counter?: boolean | undefined
+  rounded?: boolean | undefined
+  square?: boolean | undefined
+  dense?: boolean | undefined
+  itemAligned?: boolean | undefined
+  disable?: boolean | undefined
+  readonly?: boolean | undefined
+  autofocus?: boolean | undefined
+  for?: string | undefined
+  shadowText?: string | undefined
+  type?:
+    | 'text'
+    | 'password'
+    | 'textarea'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'file'
+    | 'number'
+    | 'url'
+    | 'time'
+    | 'date'
+    | undefined
+  debounce?: string | number | undefined
+  maxlength?: string | number | undefined
+  autogrow?: boolean | undefined
+  inputClass?: VueClassProp | undefined
+  inputStyle?: VueStyleProp | undefined
+  onClear?: (value: any) => void
+  'onUpdate:modelValue'?: (value: string | number | null) => void
+  onFocus?: (evt: Event) => void
+  onBlur?: (evt: Event) => void
+  onClick?: (evt: Event) => void
+}
+
+interface AppInputProps extends AppQInputProps {
+  field?: boolean
+  required?: boolean
+  datePicker?: boolean
+  timePicker?: boolean
+  dateLocale?: any
+  withIcon?: boolean
+  iconName?: string
+  iconColor?: string
+  withButton?: boolean
+  buttonIcon?: string
+  buttonTooltip?: string
+  clearTooltip?: string
+  withArrow?: boolean
+}
+
+const props = withDefaults(defineProps<AppInputProps>(), {
+  dense: true,
+  outlined: true,
+  error: undefined,
+  modelValue: '',
+})
+
+const emit = defineEmits(['update:modelValue', 'button-click', 'clear', 'focus', 'blur', 'click'])
+
+const value = computed({
+  get: () =>
+    props.modelValue !== null && props.modelValue !== undefined && props.type === 'number'
+      ? +props.modelValue
+      : props.modelValue,
+  set: (newValue: any) => emit('update:modelValue', props.type === 'number' ? +newValue : newValue),
+})
+
+const itemClasses = computed(() => ({
+  '--dense': props.dense,
+  '--bordered': props.bordered,
+}))
+</script>
+
+<style lang="scss" module>
+.app-input {
+  &:global(.q-field--outlined .q-field__control) {
+    border-radius: 14px;
+    height: 48px;
+    align-items: center;
+    padding: 0 16px;
+    color: #87caff;
+  }
+  :global(.q-field__control-container) {
+    margin-left: 8px;
+  }
+}
+@media (max-width: 1440px) {
+  .app-input {
+    &:global(.q-field--outlined .q-field__control) {
+      height: 40px;
+      padding: 0 12px;
+    }
+    :global(.q-field__control-container) {
+      margin-left: 6px;
+    }
+  }
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <q-header :class="$style.header">
     <q-toolbar :class="$style.toolbar">
-      <!--      <app-input v-model.trim="text" type="text" label="Поиск по системе" :class="$style['header-search']" />-->
+      <!--      <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>
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-//import AppInput from '@/common/app-input/AppInput.vue'
+//import AppInput from '@/common/app-input-search/AppInputSearch.vue'
 import AppButton from '@/common/app-button/AppButton.vue'
 import { storeToRefs } from 'pinia'
 import { useAuthStore } from '@/pinia/auth/useAuthStore'

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-sidebar/AppSidebar.vue

@@ -46,7 +46,7 @@
       </q-btn>
     </template>
     <sidebar-menu :menu-items="menuItems" :minify="isSidebarMini" />
-    <q-item :class="$style['menu-exit']" clickable v-ripple @click="logout()">
+    <q-item v-ripple :class="$style['menu-exit']" clickable @click="logout()">
       <q-item-section avatar>
         <app-icon :name="'logout-icon'" color="white" size="24px" />
       </q-item-section>
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, onMounted, ref, watch } from 'vue'
+import { computed, defineProps, ref, watch } from 'vue'
 import SidebarMenu from './components/SidebarMenu.vue'
 
 import { useQuasar } from 'quasar'

package/src/common/app-sidebar/components/SidebarMenuItem.vue

@@ -1,8 +1,8 @@
 <template>
   <q-expansion-item
+    v-if="item.items"
     v-model="test[`${item.icon}`]"
     header-class="text-purple"
-    v-if="item.items"
     :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
   >
     <template #header>
@@ -28,13 +28,13 @@
   </q-expansion-item>
   <q-item
     v-else-if="item.name !== 'sign-out'"
+    v-ripple
     :class="$style['menu-item']"
-    @click="goToRoute(item)"
     :to="item.to"
     :active="isRouteActive(item)"
     active-class="menu-active"
     clickable
-    v-ripple
+    @click="goToRoute(item)"
   >
     <q-tooltip
       v-if="minify"

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <q-toggle v-model="value" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'number'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (newValue: any) => emit('update:modelValue', newValue),
+})
+</script>
+
+<style module lang="scss"></style>

package/src/icons/components/arrow-down-icon.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'ArrowDownIcon',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
+      stroke="#3F8CFF"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.53 10.74L12 14.26L8.47003 10.74"
+      stroke="#3F8CFF"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>