shared-ritm 1.0.21 → 1.0.23

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

@@ -0,0 +1,135 @@
+<template>
+  <q-expansion-item
+    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>
+      <q-tooltip
+        v-if="minify"
+        :delay="100"
+        transition-show="jump-right"
+        transition-hide="jump-left"
+        anchor="center right"
+        self="center left"
+      >
+        {{ item.label }}
+      </q-tooltip>
+
+      <q-item-section v-if="item.icon" avatar>
+        <app-icon :name="item.icon" color="white" size="24px" />
+      </q-item-section>
+
+      <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
+    </template>
+
+    <sidebar-menu-item v-for="(subItem, index) in item.items" :key="index" :item="subItem" />
+  </q-expansion-item>
+  <q-item
+    v-else-if="item.name !== 'sign-out'"
+    :class="$style['menu-item']"
+    @click="goToRoute(item)"
+    :to="item.to"
+    :active="isRouteActive(item)"
+    active-class="menu-active"
+    clickable
+    v-ripple
+  >
+    <q-tooltip
+      v-if="minify"
+      :delay="100"
+      transition-show="jump-right"
+      transition-hide="jump-left"
+      anchor="center right"
+      self="center left"
+    >
+      {{ item.label }}
+    </q-tooltip>
+
+    <q-item-section v-if="item.icon" avatar>
+      <app-icon :name="item.icon" color="white" size="24px" />
+    </q-item-section>
+
+    <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
+  </q-item>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, reactive } from 'vue'
+import AppIcon from '@/common/app-icon/AppIcon.vue'
+
+interface Props {
+  minify?: boolean
+  item: {
+    name: string
+    label: string
+    icon: string
+    href: string
+    to: string
+    items: any[]
+  }
+}
+
+const props = defineProps<Props>()
+
+const test = reactive({
+  'repairs-icon': true,
+})
+
+const goToRoute = (item: any) => {
+  //window.location.href = item.to
+}
+
+const isRouteActive = (item: any) => {
+  return (item.to === '' && item.items.find((x: any) => x.to === '/repairs/')) || item.to === '/repairs/'
+}
+</script>
+
+<style lang="scss" scoped>
+.expansion-item-active {
+  background: rgba(243, 249, 253, 0.1);
+  border-radius: 10px;
+}
+</style>
+
+<style lang="scss" module>
+.menu-item {
+  margin: 0 8px;
+  &:global(.menu-active) {
+    border-radius: 10px;
+    background: rgba(243, 249, 253, 0.1);
+  }
+  :global(.q-item__section--avatar) {
+    min-width: 24px;
+    padding-right: 14px;
+  }
+
+  :global(.q-expansion-item__content .q-item) {
+    padding-left: 20px;
+  }
+  :global(.q-item__section--main ~ .q-item__section--side) {
+    color: white;
+  }
+  &__label {
+    color: #fff;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 1440px) {
+  .menu-item {
+    margin: 0 4px;
+    :global(.q-item__section--avatar) {
+      min-width: 24px;
+      padding-right: 10px;
+    }
+    &__label {
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/common/app-test-button/AppTestButton.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import AppButton from '@/App.vue'
+</script>
+
+<template>
+  <div>
+    <app-button />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/common/app-wrapper/AppWrapper.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="app-wrapper">
+    <slot />
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+.app-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 20px 0;
+  padding: 30px;
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: 0px 6px 58px 0px rgba(0, 49, 122, 0.1);
+}
+
+@media (max-width: 1440px) {
+  .app-wrapper {
+    margin: 10px 0;
+    padding: 14px;
+    border-radius: 14px;
+  }
+}
+</style>

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module 'shared-ritm'

package/src/index.ts

@@ -0,0 +1,19 @@
+import AppButton from '@/common/app-button/AppButton.vue'
+import AppInput from '@/common/app-input/AppInput.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 { useGanttService, useMetricsService, useProjectsService, useRepairsService, useTasksService }
+
+export * from '@/api/types/Api_Repairs'
+export * from '@/api/types/Api_Tasks'

package/src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { Quasar } from 'quasar'
+
+import '@quasar/extras/material-icons/material-icons.css'
+import 'quasar/src/css/index.sass'
+
+import '@/shared/styles/general.css'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+//@ts-ignore
+app.use(Quasar, { plugins: [] })
+app.mount('#app')

package/src/quasar-user-options.ts

@@ -0,0 +1,17 @@
+import { Quasar, Notify, Loading, Dialog } from 'quasar'
+
+import 'quasar/src/css/index.sass'
+import '@quasar/extras/roboto-font/roboto-font.css'
+import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
+import '@quasar/extras/mdi-v7/mdi-v7.css'
+
+const quasarUserOptions = {
+  plugins: {
+    Notify,
+    Loading,
+    Dialog,
+  },
+}
+
+export { Quasar, quasarUserOptions }

package/src/shared/styles/general.css

@@ -0,0 +1,77 @@
+:root {
+  --main-header-height: 73px;
+  --main-footer-height: 66px;
+  --sidebar-width-max: 250px;
+  --sidebar-width-min: 66px;
+}
+
+/*border-radius*/
+:root {
+  --border-radius-xxs: 4px;
+  --border-radius-xs: 8px;
+  --border-radius-s: 12px;
+  --border-radius-m: 16px;
+}
+
+/*color*/
+:root {
+  --g-blue: #3f8cff;
+  --g-blue-light: #e4efff;
+  --g-blue-dark: #1c75ff;
+  --g-green: #00d097;
+  --g-green-light: #e0f9f2;
+  --g-green-dark: #b8f8e7;
+  --g-red: #ff192d;
+  --g-red-light: #fdecee;
+  --g-red-dark: #ffdcde;
+  --g-grey-100: #d8e0f0;
+
+  --g-font-color: #0a1629;
+  --g-font-grey-color: #b9c0c7;
+  --g-font-secondary-color: #7d8592;
+
+  --g-grey-background: #ced5e0;
+  --g-grey-hover-background: #9fa5af;
+  --g-secondary-background: #f4f9fd;
+  --g-thirty-background: #c8cbcf;
+
+  --g-fire-color-1: #fee7e7;
+  --g-fire-color-2: #fed4d5;
+  --g-fire-color-3: #fcc0c0;
+  --g-fire-color-4: #f9a2a2;
+  --g-fire-color-5: #f97d7e;
+  --g-fire-color-6: #f65160;
+  --g-fire-color-7: #ff192d;
+  --g-fire-color-8: #ab0514;
+  --g-fire-color-9: #6e000a;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+button:active,
+button:focus {
+  outline: none !important;
+}
+
+html {
+  font-family: 'NunitoSansFont', sans-serif !important;
+}
+
+.ant-dropdown {
+  z-index: 10000;
+  .content {
+    z-index: 10000;
+  }
+}
+
+@font-face {
+  font-family: 'NunitoSansFont';
+  src: local('NunitoSansFont'), url(../fonts/NunitoSansFont.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat'), url(../fonts/Montserrat.ttf) format('truetype');
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/styles/variables.sass

@@ -0,0 +1,12 @@
+$primary    : #1976D2
+$secondary  : #C4C4C4
+$accent     : #665BA6
+$positive   : #3B9F69
+$negative   : #C10015
+$info       : #31CCEC
+$warning    : #F2C037
+
+$dark       : #1D1D1D
+$dark-page  : #121212
+
+$secondary: #1D1D1D