@ozdao/martyrs 0.2.506 → 0.2.507

package/src/modules/globals/views/components/sections/filters/FilterDateRange.vue

@@ -0,0 +1,177 @@
+<!-- FilterDateRange.vue -->
+<template>
+  <div class="filter-date-range">
+    <!-- Quick options -->
+    <div 
+      v-for="option in dateOptions"
+      :key="option.value"
+      @click="selectOption(option.value)"
+      :class="{ 'bg-light': selectedOption === option.value }"
+      class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+    >
+      {{ option.label }}
+    </div>
+    
+    <!-- Custom dates -->
+    <div 
+      @click="() => { tempDates = model.value ? {...model.value} : null; showCalendar = true }"
+      :class="{ 'bg-light': selectedOption === 'custom' }"
+      class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+    >
+      {{ dateRangeLabel }}
+    </div>
+
+    <!-- Calendar Popup -->
+    <Popup
+      v-model:show="showCalendar"
+      class="pd-medium bg-white radius-medium"
+      style="min-width: 350px;"
+    >
+      <h3 class="mn-b-medium">Select Date Range</h3>
+      
+      <Calendar
+        v-model:date="tempDates"
+        :allowRange="true"
+        :disablePastDates="true"
+        class="mn-b-medium"
+      />
+      
+      <div class="flex gap-small">
+        <button 
+          @click="applyDates"
+          class="button bg-main t-white flex-child-full pd-small radius-small"
+        >
+          Apply
+        </button>
+        <button 
+          @click="showCalendar = false"
+          class="button bg-light flex-child-full pd-small radius-small"
+        >
+          Cancel
+        </button>
+      </div>
+    </Popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
+import Popup from '@martyrs/src/components/Popup/Popup.vue'
+import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js'
+
+const { formatDate } = useGlobalMixins()
+
+const props = defineProps({
+  dateOptions: {
+    type: Array,
+    default: () => [
+      { label: 'Available today', value: 'today' },
+      { label: 'This week', value: 'week' },
+      { label: 'This month', value: 'month' }
+    ]
+  }
+})
+
+const model = defineModel({
+  type: Object,
+  default: () => null
+})
+
+const emit = defineEmits(['update:modelValue', 'apply'])
+
+const showCalendar = ref(false)
+const selectedOption = ref(null)
+const tempDates = ref(null)
+
+const dateRangeLabel = computed(() => {
+  if (!model.value || !model.value.start || !model.value.end) {
+    return 'Select dates'
+  }
+  const start = formatDate(model.value.start, { dayMonth: true, language: 'en' })
+  const end = formatDate(model.value.end, { dayMonth: true, language: 'en' })
+  return `${start} - ${end}`
+})
+
+const selectOption = (value) => {
+  selectedOption.value = value
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  
+  let dateRange = null
+  
+  switch(value) {
+    case 'today':
+      dateRange = {
+        start: today,
+        end: today
+      }
+      break
+    case 'week':
+      const weekEnd = new Date(today)
+      weekEnd.setDate(today.getDate() + 7)
+      dateRange = {
+        start: today,
+        end: weekEnd
+      }
+      break
+    case 'month':
+      const monthEnd = new Date(today)
+      monthEnd.setMonth(today.getMonth() + 1)
+      dateRange = {
+        start: today,
+        end: monthEnd
+      }
+      break
+  }
+  
+  if (dateRange) {
+    model.value = dateRange
+    emit('apply')
+  }
+}
+
+const applyDates = () => {
+  if (tempDates.value) {
+    model.value = tempDates.value
+    selectedOption.value = 'custom'
+    emit('apply')
+  }
+  showCalendar.value = false
+}
+
+// Watch for model changes to update selected option
+watch(() => model.value, (newVal) => {
+  if (newVal && newVal.start && newVal.end) {
+    tempDates.value = { ...newVal }
+    
+    // Determine which option is selected based on dates
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    const start = new Date(newVal.start)
+    start.setHours(0, 0, 0, 0)
+    const end = new Date(newVal.end)
+    end.setHours(0, 0, 0, 0)
+    
+    const diffDays = Math.round((end - start) / (1000 * 60 * 60 * 24))
+    
+    if (start.getTime() === today.getTime() && end.getTime() === today.getTime()) {
+      selectedOption.value = 'today'
+    } else if (start.getTime() === today.getTime() && diffDays === 7) {
+      selectedOption.value = 'week'
+    } else if (start.getTime() === today.getTime() && diffDays >= 28 && diffDays <= 31) {
+      selectedOption.value = 'month'
+    } else {
+      selectedOption.value = 'custom'
+    }
+  } else {
+    selectedOption.value = null
+  }
+}, { immediate: true, deep: true })
+</script>
+
+<style scoped>
+.filter-date-range {
+  width: 100%;
+}
+</style>

package/src/modules/globals/views/components/sections/filters/FilterRange.vue

@@ -1,74 +1,75 @@
-<!-- filters/FilterRange.vue -->
+<!-- FilterRange.vue -->
 <template>
   <div class="filter-range">
-    <div class="range-slider">
-      <input
-        type="range"
-        v-model.number="localValue"
-        :min="config?.min || 0"
-        :max="config?.max || 100"
-        :step="config?.step || 1"
-        @input="updateValue"
-        class="w-100"
+    <div class="flex gap-thin mn-b-small">
+      <Field
+        v-model="localValue.min"
+        :placeholder="minPlaceholder"
+        type="number"
+        class="w-50 bg-light pd-small radius-small"
+        @keypress.enter="applyRange"
+      />
+      <Field
+        v-model="localValue.max"
+        :placeholder="maxPlaceholder"
+        type="number"
+        class="w-50 bg-light pd-small radius-small"
+        @keypress.enter="applyRange"
       />
-      <div class="flex justify-between mt-thin">
-        <span class="t-small">{{ config?.min || 0 }}{{ config?.unit || '' }}</span>
-        <span class="t-bold">{{ localValue }}{{ config?.unit || '' }}</span>
-        <span class="t-small">{{ config?.max || 100 }}{{ config?.unit || '' }}</span>
-      </div>
     </div>
+    <button 
+      @click="applyRange"
+      class="button bg-main t-white w-100 pd-small radius-small"
+    >
+      Apply
+    </button>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
 
 const props = defineProps({
-  config: Object
+  minPlaceholder: {
+    type: String,
+    default: 'From'
+  },
+  maxPlaceholder: {
+    type: String,
+    default: 'To'
+  }
 })
 
 const model = defineModel({
-  type: Number,
-  default: 0
+  type: Object,
+  default: () => ({ min: '', max: '' })
 })
 
-const localValue = ref(model.value)
+const emit = defineEmits(['update:modelValue', 'apply'])
 
-watch(model, (val) => {
-  localValue.value = val
+const localValue = ref({ 
+  min: model.value?.min || '', 
+  max: model.value?.max || '' 
 })
 
-const updateValue = () => {
-  model.value = localValue.value
-}
-</script>
-
-<style>
-.range-slider input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 6px;
-  background: var(--color-light);
-  border-radius: 3px;
-  outline: none;
+const applyRange = () => {
+  model.value = { ...localValue.value }
+  emit('apply')
 }
 
-.range-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  background: var(--color-primary);
-  border-radius: 50%;
-  cursor: pointer;
-}
+watch(() => model.value, (newVal) => {
+  if (newVal) {
+    localValue.value = { 
+      min: newVal.min || '', 
+      max: newVal.max || '' 
+    }
+  }
+}, { deep: true })
+</script>
 
-.range-slider input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  background: var(--color-primary);
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
+<style scoped>
+.filter-range {
+  width: 100%;
 }
 </style>

package/src/modules/icons/entities/IconLock.vue

@@ -0,0 +1,14 @@
+<template>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<path :fill="fill" d="m50 16.668c6.8672 0 12.5 5.6328 12.5 12.5v12.5h-25v-12.5c0-6.8672 5.6328-12.5 12.5-12.5zm20.832 25v-12.5c0-11.469-9.3633-20.836-20.832-20.836s-20.832 9.3672-20.832 20.836v12.5h-4.168c-4.6016 0-8.332 3.7305-8.332 8.332v33.332c0 4.6055 3.7305 8.3359 8.332 8.3359h50c4.6016 0 8.332-3.7305 8.332-8.3359v-33.332c0-4.6016-3.7305-8.332-8.332-8.332zm-45.832 8.332h50v33.332h-50z"/>
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/icons.client.js

@@ -30,7 +30,7 @@ import IconRecent from './entities/IconRecent.vue';
 import IconSettings from './entities/IconSettings.vue';
 import IconShopcart from './entities/IconShopcart.vue';
 import IconTime from './entities/IconTime.vue';
-
+import IconLock from './entities/IconLock.vue';
 // Labels
 import LabelAppStore from './labels/LabelAppStore.vue';
 import LabelGooglePlay from './labels/LabelGooglePlay.vue';
@@ -185,6 +185,7 @@ export {
   IconSettings,
   IconShopcart,
   IconTime,
+  IconLock,
   
   // Actions
   IconDuplicate,

package/src/modules/icons/pages/IconsPage.vue

@@ -2,7 +2,7 @@
   <div class="pd-medium">
     <div class="flex-between mn-b-medium">
       <h2>Martyrs Icons Gallery</h2>
-      <button @click="openAddIconPopup" class="pd-small pd-h-medium bg-primary t-white radius-medium hover-scale-1 cursor-pointer border-none">
+      <button @click="openAddIconPopup" class="pd-small pd-medium bg-second t-white radius-medium hover-scale-1 cursor-pointer border-none">
         Add New Icon
       </button>
     </div>
@@ -118,6 +118,7 @@ import IconEmail from '@martyrs/src/modules/icons/entities/IconEmail.vue';
 import IconAddress from '@martyrs/src/modules/icons/entities/IconAddress.vue';
 import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';
 import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';
+import IconLock from '@martyrs/src/modules/icons/entities/IconLock.vue';
 
 // Import placeholders icons
 import PlaceholderOrganizationPic from '@martyrs/src/modules/icons/placeholders/PlaceholderOrganizationPic.vue';
@@ -221,7 +222,8 @@ const iconsMap = {
     IconOrders,
     IconMusic,
     IconProfile,
-    IconGroups
+    IconGroups,
+    IconLock
   },
   placeholders: {
     PlaceholderOrganizationPic,

package/src/modules/landing/components/sections/SubscribeNewsletter.vue

@@ -5,28 +5,23 @@
       <p class="t-transp p-semi">{{ t('subtitle') }}</p>
     </header>
 
-    <FieldBig 
-      :input="email" 
-      :typingSpeed="75"
-      :loopTyping="false"
-      :enableTyping="false"
-      :placeholder="t('placeholder')"
-      :action="t('action')"
-      @update:input="email = $event"
-      @action="sendApplication"
+    <FieldSubscribeNewsletter
+      :placeholder="te('placeholder') ? t('placeholder') : null"
+      :action="te('action') ? t('action') : null"
+      :successTitle="te('success.title') ? t('success.title') : null"
+      :successSubtitle="te('success.subtitle') ? t('success.subtitle') : null"
+      :socials="te('socials') ? tm('socials') : null"
+      fieldName="newsletter-subscribe"
+      fieldId="newsletter-subscribe-main"
       class="d-inline-flex bg-white t-black w-100 w-max-40r"
     />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import FieldBig from "@martyrs/src/components/FieldBig/FieldBig.vue";
-
-import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
-import * as applications from '@martyrs/src/modules/orders/store/applications.js';
+import FieldSubscribeNewsletter from '@martyrs/src/modules/orders/components/elements/FieldSubscribeNewsletter.vue'
 
 // import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
 
@@ -42,55 +37,10 @@ const props = defineProps({
   }
 })
 
-// Localization
-const { t } = useI18n({
+// Локализация
+const { t, tm, te } = useI18n({
   messages: props.content
 })
-
-let email = ref('')
-let emailValidation = ref(false)
-
-async function sendApplication() {
-  // try {
-  //   await inputsValidation.validateInputs(
-  //     emailValidation, 
-  //     inputsValidation.validateEmail, 
-  //     email.value, 
-  //     'Wrong email'
-  //   )
-  // } catch (error) {
-  //    globals.setError({
-  //     response: {
-  //       status: "Invalid Email", 
-  //       data: {
-  //         message: "The email address entered is invalid. Please provide a valid email address."
-  //       }
-  //     }
-  //   });
-  //   return false
-  // }
-
-  gtag('event', 'subscribe_newsletter', {
-    'event_category': 'conversion',
-    'event_label': 'Subscribe Newsletter'
-  });
-
-  try {
-    let application = {
-      type: 'newsletter',
-      contacts: {
-        email: email.value
-      }
-    };
-    const response = await applications.create(application);
-
-    return Promise.resolve(response.data);
-  } catch (error) {
-    console.log(error)
-    globals.setError(error)
-    return Promise.reject(error);
-  }
-}
 </script>
 
 <style lang="scss" >

package/src/modules/landing/landing.client.js

@@ -14,6 +14,12 @@ import SectionFeaturesImages from './components/sections/SectionFeaturesImages.v
 import SectionHeroToken from './components/sections/SectionHeroToken.vue';
 import SectionRoadmap from './components/sections/SectionRoadmap.vue';
 
+import { i18nManager } from '@martyrs/src/modules/globals/views/classes/globals.i18n.js';
+import locales from './locales/index.js';
+
+// Регистрируем локализацию для модуля landing
+i18nManager.register('landing', locales);
+
 export {
   AnimatedGrid,
   FloatingImages,

package/src/modules/landing/locales/en.js

@@ -0,0 +1,9 @@
+// @martyrs/src/modules/landing/locales/en.js
+export default {
+  landing: {
+    newsletter: {
+      title: 'Stay Updated with Latest in Digital',
+      subtitle: 'Subscribe to our newsletter for news, insights, and more from the OZ DAO.'
+    }
+  }
+};

package/src/modules/landing/locales/index.js

@@ -0,0 +1,7 @@
+import en from './en.js';
+import ru from './ru.js';
+
+export default {
+  en,
+  ru
+};

package/src/modules/landing/locales/ru.js

@@ -0,0 +1,9 @@
+// @martyrs/src/modules/landing/locales/ru.js
+export default {
+  landing: {
+    newsletter: {
+      title: 'Будьте в курсе последних новостей',
+      subtitle: 'Подпишитесь на нашу рассылку, чтобы получать новости, инсайты и многое другое от OZ DAO.'
+    }
+  }
+};

package/src/modules/music/components/pages/Album.vue

@@ -116,7 +116,7 @@
         <!-- Artists Cards -->
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small" v-if="album.artists">Artists</h3>
-          <div class="flex flex-col gap-small">
+          <div class="flex flex-column gap-small">
             <ArtistCardSmall 
               v-for="artist in album.artists" 
               :key="artist._id"

package/src/modules/music/components/pages/Playlist.vue

@@ -115,7 +115,7 @@
 
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small">Created by</h3>
-          <div class="flex flex-col gap-small">
+          <div class="flex flex-column gap-small">
             <ArtistCardSmall 
               :artist="{
                 _id: playlist.creator.target,

package/src/modules/music/components/pages/Track.vue

@@ -125,7 +125,7 @@
         <!-- Artist Card -->
         <div class="artists-section mn-b-medium">
           <h3 class="t-medium mn-b-small" v-if="track.artist">Artist</h3>
-          <div class="flex flex-col gap-small">
+          <div class="flex flex-column gap-small">
             <ArtistCardSmall 
               :key="track.artist._id"
               :artist="track.artist"

package/src/modules/orders/components/blocks/CardApplication.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="bg-light pos-relative pd-medium radius-medium">
+    <div class="mn-b-small flex">
+      <div class="mn-r-auto">
+        <h3 class="mn-b-thin">{{ application.contacts?.name || application.contacts?.email || application.contacts?.phone || 'Unnamed Application' }}</h3>
+        <p class="t-transp">{{ application.contacts?.email || application.contacts?.phone }}</p>
+      </div>
+      <div class="flex-center">
+        <StatusBadge :value="{
+          text: application.status,
+          color: application.status === 'completed' ? '#22c55e' : application.status === 'in_progress' ? '#f59e0b' : '#6b7280'
+        }" />
+      </div>
+    </div>
+
+    <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
+      <div class="w-100">
+        <p class="t-truncate">{{ application.type || 'Unknown' }}</p> 
+        <small class="t-transp">Type</small>
+      </div>
+
+      <div class="w-100 t-right">
+        <p>{{ formatDate(application.updatedAt) }}</p>
+        <small class="t-transp">Updated</small>
+      </div>
+    </div>
+
+    <div class="pd-small bg-white radius-small">
+      <div class="flex mn-b-thin">
+        <div class="mn-r-auto">
+          <p>{{ application.contacts?.phone || 'No phone' }}</p>
+          <small class="t-transp">Phone</small>
+        </div>
+        <div class="t-right">
+          <p>#{{ application._id.slice(0, 4) + '...' + application._id.slice(-4) }}</p>
+          <small class="t-transp">ID</small>
+        </div>
+      </div>
+
+      <div v-if="application.text" class="mn-t-thin">
+        <p class="t-small">{{ application.text.length > 100 ? application.text.slice(0, 100) + '...' : application.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
+
+  defineProps({
+    application: {
+      type: Object,
+      required: true
+    },
+    formatDate: {
+      type: Function,
+      required: true
+    }
+  });
+</script>
+
+<style scoped>
+  .bg-light {
+    background-color: var(--color-bg-light, #f8f9fa);
+  }
+  
+  .bg-light-transp {
+    background-color: var(--color-bg-light-transp, rgba(248, 249, 250, 0.7));
+  }
+  
+  .bg-light-transp-50 {
+    background-color: var(--color-bg-light-transp-50, rgba(248, 249, 250, 0.5));
+  }
+</style>