shared-ritm 1.1.15 → 1.1.17

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ import AppSheet from '@/common/app-sheet/AppSheet.vue';
 import AppSidebar from '@/common/app-sidebar/AppSidebar.vue';
 import AppToggle from '@/common/app-toggle/AppToggle.vue';
 import AppWrapper from '@/common/app-wrapper/AppWrapper.vue';
+import AppConfirmDialog from '@/common/app-dialogs/AppConfirmDialog.vue';
 import useGanttService from '@/api/services/GanttService';
 import useMetricsService from '@/api/services/MetricsService';
 import useProjectsService from '@/api/services/ProjectsService';
@@ -19,7 +20,7 @@ import useRepairsService from '@/api/services/RepairsService';
 import useTasksService from '@/api/services/TasksService';
 import useAuthService from '@/api/services/AuthService';
 import ApiService from '@/api/settings/ApiService';
-export { AppButton, AppCheckbox, AppDatePicker, AppInput, AppInputSearch, AppLayout, AppLayoutHeader, AppLoader, AppSelect, AppSheet, AppSidebar, AppToggle, AppWrapper, };
+export { AppButton, AppCheckbox, AppDatePicker, AppInput, AppInputSearch, AppLayout, AppLayoutHeader, AppLoader, AppSelect, AppSheet, AppSidebar, AppToggle, AppWrapper, AppConfirmDialog, };
 export { ApiService, useAuthService, useGanttService, useMetricsService, useProjectsService, useRepairsService, useTasksService, };
 export type { NotificationType } from './utils/notification';
 export { notificationSettings } from './utils/notification';

package/dist/types/utils/confirm.d.ts

@@ -0,0 +1 @@
+export declare const appConfirm: (content: string, type: "delete" | "edit") => import("quasar").DialogChainObject;

package/dist/types/utils/notification.d.ts

@@ -1,6 +1,3 @@
+import { QNotifyCreateOptions } from 'quasar';
 export type NotificationType = 'danger' | 'success' | 'warning' | 'info' | 'default';
-export declare const notificationSettings: (type: NotificationType, message: string) => {
-    message: string;
-    color: string;
-    position: string;
-};
+export declare const notificationSettings: (type: NotificationType, message: string) => QNotifyCreateOptions;

package/package.json

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

package/src/App.vue

@@ -7,21 +7,30 @@
       <app-sidebar :is-drawer="true" :menu-items="menuItems" />
     </template>
     <div class="wrapper">
-      <app-button label="asad" color="primary" />
+      <app-button
+        label="asad"
+        color="primary"
+        @click="openConfirm('После подтверждения проект будет удалён', 'delete')"
+      />
       <app-input v-model="test" type="text" />
     </div>
   </app-layout>
 </template>
 
 <script setup lang="ts">
+import { useQuasar } from 'quasar'
 import AppButton from '@/common/app-button/AppButton.vue'
 import AppInput from '@/common/app-input/AppInput.vue'
-import { ref } from 'vue'
+import { defineAsyncComponent, 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 $q = useQuasar()
+
+const AppConfirmDialog = defineAsyncComponent(() => import('@/common/app-dialogs/AppConfirmDialog.vue'))
+
 const userData = {
   id: '9d340f1a-8d46-4606-b102-76d0a8a70e10',
   last_name: 'Савин',
@@ -2402,6 +2411,13 @@ const menuItems = ref([
   { name: 'notification', icon: 'notification-icon', label: 'Уведомления', to: '/notification' },
   { name: 'sign-out', icon: 'logout-icon', label: 'Выход', to: '/sign-out' },
 ])
+
+const openConfirm = (content: string, type: 'delete' | 'edit') => {
+  return $q.dialog({
+    component: AppConfirmDialog,
+    componentProps: { content, type },
+  })
+}
 </script>
 <style lang="scss">
 .wrapper {

package/src/common/app-dialogs/AppConfirmDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
+    <q-card :class="$style.modal">
+      <q-card-section :class="$style['modal__content']">
+        <div :class="$style['modal__content__header']">
+          <safety-icon v-if="type === 'edit'" />
+          <remove-icon v-if="type === 'delete'" />
+          <h4>Подтвердить ?</h4>
+        </div>
+        <p>{{ content }}</p>
+      </q-card-section>
+      <q-card-section :class="$style.footer">
+        <app-button :class="$style['footer__btn--ok']" label="Подтвердить" @click="onDialogOK" />
+        <app-button :class="$style['footer__btn--cancel']" label="Отменить" @click="onDialogHide" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar'
+import { AppButton } from 'shared-ritm'
+import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
+import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
+
+const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
+
+interface Props {
+  content: string
+  type: 'delete' | 'edit'
+}
+
+const props = defineProps<Props>()
+</script>
+
+<style lang="scss" module>
+.modal {
+  font-family: NunitoSansFont, sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  height: 409px;
+  border-radius: 24px !important;
+  justify-content: space-between;
+  padding: 40px;
+  &__content {
+    margin: auto;
+    flex-grow: 1;
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+      h4 {
+        font-size: 24px;
+        font-weight: 600;
+      }
+    }
+  }
+  p {
+    margin-top: 14px;
+    margin-bottom: 0;
+    font-size: 16px;
+    text-align: center;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  //height: 146px;
+  padding: 0;
+  &__btn--ok,
+  &__btn--cancel {
+    background-color: #3f8cff;
+    border-radius: 9px;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    width: 300px;
+    height: 48px;
+    cursor: pointer;
+    span {
+      color: white;
+    }
+  }
+  &__btn--cancel {
+    background-color: white;
+    border: 1px solid #3f8cff;
+    span {
+      color: #3f8cff;
+    }
+  }
+}
+</style>

package/src/icons/dialogs/RemoveIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M35 2.5C38.9942 2.5 42.2592 5.6223 42.4873 9.55932L42.5 10V12.5H47.5H52.5C53.8807 12.5 55 13.6193 55 15C55 16.2821 54.0349 17.3388 52.7916 17.4832L52.5 17.5H50V50C50 53.9942 46.8777 57.2592 42.9407 57.4873L42.5 57.5H17.5C13.5058 57.5 10.2408 54.3777 10.0127 50.4407L10 50V17.5H7.5C6.11929 17.5 5 16.3807 5 15C5 13.7179 5.9651 12.6612 7.20845 12.5168L7.5 12.5H12.5H17.5V10C17.5 6.0058 20.6223 2.74085 24.5593 2.51273L25 2.5H35ZM15 17.5V50C15 51.2821 15.9651 52.3388 17.2084 52.4832L17.5 52.5H42.5C43.7821 52.5 44.8388 51.5349 44.9832 50.2916L45 50V17.5H40H20H15ZM37.5 12.5H22.5V10L22.5168 9.70845C22.6612 8.4651 23.7179 7.5 25 7.5H35L35.2916 7.51682C36.5349 7.66123 37.5 8.71791 37.5 10V12.5ZM25 25C26.2821 25 27.3388 25.9651 27.4832 27.2084L27.5 27.5V42.5C27.5 43.8807 26.3807 45 25 45C23.7179 45 22.6612 44.0349 22.5168 42.7916L22.5 42.5V27.5C22.5 26.1193 23.6193 25 25 25ZM37.4832 27.2084C37.3388 25.9651 36.2821 25 35 25C33.6193 25 32.5 26.1193 32.5 27.5V42.5L32.5168 42.7916C32.6612 44.0349 33.7179 45 35 45C36.3807 45 37.5 43.8807 37.5 42.5V27.5L37.4832 27.2084Z"
+      fill="#F65160"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss"></style>

package/src/icons/dialogs/SafetyIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M47.5 2.5H12.5C6.97715 2.5 2.5 6.97715 2.5 12.5V25C2.5 35.9165 9.14893 45.4216 22.0963 53.4484C26.938 56.45 33.062 56.45 37.9037 53.4484L38.8284 52.8657C51.1712 44.9576 57.5 35.6473 57.5 25V12.5C57.5 6.97715 53.0228 2.5 47.5 2.5ZM12.5 7.5H47.5C50.2614 7.5 52.5 9.73858 52.5 12.5V25C52.5 33.7331 47.1592 41.5899 36.1469 48.6456L35.2535 49.2085C32.0413 51.1999 27.9586 51.1999 24.7309 49.1988C13.1268 42.0048 7.5 33.9609 7.5 25V12.5C7.5 9.73858 9.73858 7.5 12.5 7.5ZM44.2833 15.7258C43.3072 14.7492 41.7243 14.7488 40.7477 15.7248L27.5 28.9625L21.7783 23.2302L21.543 23.0221C20.5629 22.2587 19.1448 22.3268 18.2428 23.2273C17.2657 24.2028 17.2643 25.7857 18.2398 26.7628L25.7308 34.2663L25.9662 34.4745C26.9467 35.2382 28.3655 35.1696 29.2673 34.2682L44.2823 19.2613L44.4904 19.0258C45.2532 18.0453 45.1842 16.6272 44.2833 15.7258Z"
+      fill="#00D097"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss"></style>

package/src/index.ts

@@ -12,6 +12,7 @@ import AppSheet from '@/common/app-sheet/AppSheet.vue'
 import AppSidebar from '@/common/app-sidebar/AppSidebar.vue'
 import AppToggle from '@/common/app-toggle/AppToggle.vue'
 import AppWrapper from '@/common/app-wrapper/AppWrapper.vue'
+import AppConfirmDialog from '@/common/app-dialogs/AppConfirmDialog.vue'
 
 import useGanttService from '@/api/services/GanttService'
 import useMetricsService from '@/api/services/MetricsService'
@@ -35,6 +36,7 @@ export {
   AppSidebar,
   AppToggle,
   AppWrapper,
+  AppConfirmDialog,
 }
 
 export {

package/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { Quasar } from 'quasar'
+import { Quasar, quasarUserOptions } from './quasar-user-options'
 
 import '@quasar/extras/material-icons/material-icons.css'
 import 'quasar/src/css/index.sass'
@@ -11,5 +11,5 @@ import App from './App.vue'
 const app = createApp(App)
 
 //@ts-ignore
-app.use(Quasar, { plugins: [] })
+app.use(Quasar, quasarUserOptions)
 app.mount('#app')

package/src/utils/confirm.ts

@@ -0,0 +1,12 @@
+import { defineAsyncComponent } from 'vue'
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
+
+const AppConfirmDialog = defineAsyncComponent(() => import('@/common/app-dialogs/AppConfirmDialog.vue'))
+
+export const appConfirm = (content: string, type: 'delete' | 'edit') => {
+  return $q.dialog({
+    component: AppConfirmDialog,
+    componentProps: { content, type },
+  })
+}

package/src/utils/notification.ts

@@ -1,12 +1,9 @@
+import { QNotifyCreateOptions } from 'quasar'
+
 export type NotificationType = 'danger' | 'success' | 'warning' | 'info' | 'default'
 
-export const notificationSettings = (
-  type: NotificationType,
-  message: string,
-): { message: string; color: string; position: string } => {
-  return {
-    message,
-    color: type === 'danger' ? 'red' : type === 'success' ? 'green' : type === 'warning' ? 'orange' : 'white',
-    position: 'top-right',
-  }
-}
+export const notificationSettings = (type: NotificationType, message: string): QNotifyCreateOptions => ({
+  message,
+  color: type === 'danger' ? 'red' : type === 'success' ? 'green' : type === 'warning' ? 'orange' : 'white',
+  position: 'top-right',
+})