shared-ritm 1.0.23 → 1.0.25

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.25",
   "private": false,
   "files": [
     "dist",

package/src/App.vue

@@ -1,8 +1,112 @@
 <template>
-  <app-button label="asad" color="primary" />
+  <app-layout :logged="false">
+    <template #header>
+      <!--      <app-layout-header />-->
+    </template>
+    <template #drawer>
+      <app-sidebar :is-drawer="true" :menu-items="menuItems" />
+    </template>
+    <app-button label="asad" color="primary" />
+    <app-input v-model="test" type="text" />
+  </app-layout>
 </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'
+import AppSidebar from '@/common/app-sidebar/AppSidebar.vue'
+import AppLayout from '@/common/app-layout/AppLayout.vue'
+//import AppLayoutHeader from '@/common/app-layout/components/AppLayoutHeader.vue'
+const test = ref('sdf')
+const menuItems = ref([
+  { name: 'profile', icon: 'user-icon', label: 'Мой профиль', to: '/profile' },
+  {
+    name: 'repairs-icon',
+    icon: 'repairs-icon',
+    label: 'Ремонты',
+    to: '',
+    items: [
+      { name: 'repairs/', icon: 'repairs-icon', label: 'Ремонты', to: '/repairs/' },
+      { name: 'equipment', icon: 'videozones-icon', label: 'Оборудование', to: '/equipment' },
+    ],
+  },
+  { name: 'projects', icon: 'projects-icon', label: 'Проекты', to: '/projects' },
+  { name: 'projects-and-tasks', icon: 'projects-icon', label: 'Проекты и задачи', to: '/projects-and-tasks' },
+  {
+    name: 'tasks-icon',
+    icon: 'tasks-icon',
+    label: 'Задачник',
+    to: '',
+    items: [
+      { name: 'tasks', icon: 'tasks_tasks-icon', label: 'Рабочие задания', to: '/tasks' },
+      { name: 'my-tasks-today', icon: 'tasks_today-icon', label: 'Мои рабочие задания', to: '/my-tasks-today' },
+    ],
+  },
+  {
+    name: 'instruments-icon',
+    icon: 'instruments-icon',
+    label: 'Инструменты',
+    to: '',
+    items: [
+      { name: 'instruments', icon: 'repairs-icon', label: 'Инструменты', to: '/instruments' },
+      { name: 'warehouses', icon: 'warehouses-icon', label: 'Инструменты на складе', to: '/warehouses' },
+      { name: 'workshop', icon: 'workshop-icon', label: 'Мастерская', to: '/workshop' },
+      {
+        name: 'instrument-work-zone',
+        icon: 'instrument-work-zone-icon',
+        label: 'Зоны проведения работ',
+        to: '/instrument-work-zone',
+      },
+    ],
+  },
+  {
+    name: 'order-icon',
+    icon: 'order-icon',
+    label: 'Заказ',
+    to: '',
+    items: [
+      { name: 'instrument-preorder', icon: 'preorder-icon', label: 'Предзаказ', to: '/instrument-preorder' },
+      { name: 'instrument-order', icon: 'instrument-order-icon', label: 'Заказы МТР', to: '/instrument-order' },
+    ],
+  },
+  { name: 'modules', icon: 'modules-icon', label: 'Модули', to: '/modules' },
+  {
+    name: 'instrument-history',
+    icon: 'instrument-history-icon',
+    label: 'История применения',
+    to: '/instrument-history',
+  },
+  { name: 'status-history', icon: 'status-history-icon', label: 'История статусов', to: '/status-history' },
+  { name: 'pass', icon: 'pass-icon', label: 'Присвоить метку', to: '/pass' },
+  { name: 'assign-module', icon: 'assign-module-icon', label: 'Выдать МТР', to: '/assign-module' },
+  {
+    name: 'users-icon',
+    icon: 'users-icon',
+    label: 'Пользователи',
+    to: '',
+    items: [
+      { name: 'users', icon: 'user-icon', label: 'Пользователи', to: '/users' },
+      { name: 'positions', icon: 'positions-icon', label: 'Должности', to: '/positions' },
+      { name: 'roles', icon: 'roles-icon', label: 'Роли', to: '/roles' },
+      { name: 'teams', icon: 'teams-icon', label: 'Команды', to: '/teams' },
+    ],
+  },
+  {
+    name: 'workzones-icon',
+    icon: 'workzones-icon',
+    label: 'Зоны работ',
+    to: '',
+    items: [
+      { name: 'work-zone', icon: 'videozones-icon', label: 'Видео зоны', to: '/work-zone' },
+      { name: 'video-source', icon: 'videosources-icon', label: 'Источники видео', to: '/video-source' },
+      { name: 'video-wall', icon: 'videowall-icon', label: 'Видео стена', to: '/video-wall' },
+      { name: 'checkpoints', icon: 'modules-icon', label: 'Контрольные точки', to: '/checkpoints' },
+    ],
+  },
+  { name: 'video-sync', icon: 'videozones-icon', label: 'Разметка видеозоны', to: '/video-sync' },
+  { name: 'notifications', icon: 'notifications-icon', label: 'Уведомления', to: '/notifications' },
+  { name: 'sign-out', icon: 'logout-icon', label: 'Выход', to: '/sign-out' },
+])
 </script>
 <style lang="scss"></style>

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

@@ -0,0 +1,104 @@
+<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'
+
+interface Props {
+  size?: string | undefined
+  tag?: string | undefined
+  name: string
+  color?: string | 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'