build action

.forgejo/workflows/make-image.yml

@@ -0,0 +1,40 @@
+on:
+  push:
+    tags:
+      - 'v[0-9]+*'
+  workflow_dispatch:
+
+env:
+  IMAGE_NAME: mtv2-frontend
+
+jobs:
+  build-and-push:
+    name: Make image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Forgejo
+        uses: docker/login-action@v3
+        with:
+          registry: repo.nqws.ru
+          username: ${{ secrets.MAINTAINER_USERNAME }}
+          password: ${{ secrets.MAINTAINER_TOKEN }}
+
+      - name: Extract version from tag
+        id: extract_version
+        run: |
+          VERSION=${GITHUB_REF#refs/tags/}
+          echo "VERSION=${VERSION}" >> $GITHUB_ENV
+
+      - name: Make image
+        run: |
+          docker buildx build --platform linux/amd64 \
+            --tag repo.nqws.ru/${{ github.repository }}:latest \
+            --tag repo.nqws.ru/${{ github.repository }}:${{ env.VERSION }} \
+            --push .

Dockerfile

@@ -1,5 +1,17 @@
+FROM node:24.10-alpine3.22 AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci --prefer-offline --no-audit
+
+COPY . .
+
+RUN npm run build
+
 FROM nginx:alpine
-COPY dist/ /usr/share/nginx/html
+
+COPY --from=builder /app/dist/ /usr/share/nginx/html/
 
 COPY nginx.conf /etc/nginx/nginx.conf
 

src/App.vue

@@ -1,23 +1,40 @@
 <script setup>
 import NavBar from '@/components/Navbar/NavBar.vue'
+import Footer from '@/components/Footer/Footer.vue'
 </script>
 
 <template>
-  <NavBar />
+  <n-config-provider>
+    <n-message-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <NavBar />
 
-  <n-grid responsive="screen" item-responsive cols="24" :x-gap="16" :y-gap="16" class="shift">
-    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
+          <n-grid
+            responsive="screen"
+            item-responsive
+            cols="24"
+            :x-gap="16"
+            :y-gap="16"
+            class="shift"
+          >
+            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
 
-    <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
-      <router-view />
-    </n-gi>
+            <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
+              <router-view />
+            </n-gi>
 
-    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
-  </n-grid>
+            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
+          </n-grid>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-config-provider>
+  <Footer />
 </template>
 
 <style scoped>
-.shift{
+.shift {
   padding-top: 10px;
 }
 </style>

src/components/ChartBlock.vue

@@ -137,11 +137,9 @@ const chartOptions = {
 watch(
   () => props.chartsData,
   (newData) => {
-    // Сброс состояния
     showPlaceholder.value = false
     placeholderMessage.value = ''
 
-    // Случай 1: null или undefined
     if (newData === null || newData === undefined) {
       showPlaceholder.value = true
       placeholderMessage.value = 'No prices found'
@@ -149,7 +147,6 @@ watch(
       return
     }
 
-    // Случай 2: явная ошибка в объекте
     if (typeof newData === 'object' && newData.error) {
       showPlaceholder.value = true
       placeholderMessage.value = newData.error
@@ -157,13 +154,11 @@ watch(
       return
     }
 
-    // Случай 3: нормальный объект — пробуем преобразовать
     let datasets = []
     if (newData.origins && Array.isArray(newData.origins)) {
       datasets = transformToChartJSSeries(newData)
     }
 
-    // 🔥 Ключевое изменение: проверяем, есть ли хоть один датасет
     if (datasets.length === 0) {
       showPlaceholder.value = true
       placeholderMessage.value = 'No prices found'

src/components/CopyToClipboard.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+
+const message = useMessage()
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+})
+
+const copyToClipboard = async () => {
+  if (!props.text || props.text.trim() === '') {
+    message.error('Nothing to copy to clipboard')
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(props.text)
+    copySuccess()
+  } catch (err) {
+    console.error('Error copy to clipboard', err)
+    copyError()
+  }
+}
+
+function copySuccess() {
+  const displayText = props.text.length > 50
+    ? props.text.substring(0, 50) + '...'
+    : props.text
+  message.success(`Copied to clipboard: ${displayText}`)
+}
+
+function copyError() {
+  message.error('Nothing to copy to clipboard')
+}
+
+
+</script>
+
+<template>
+  <span @click="copyToClipboard">
+    <slot />
+  </span>
+</template>
+
+<style scoped></style>

src/components/Footer/Footer.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+</script>
+
+<template>
+<n-divider class="mt-10" />
+  <p class="text-center text-muted">Merch tracker 2024 - 2025 </p>
+</template>
+
+<style scoped>
+
+</style>

src/main.js

@@ -7,7 +7,10 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
-export const BASE_URL = 'http://localhost:9090/api/v2'
+export const BASE_URL = 'https://api.nqws.ru/api/v2'
+// export const BASE_URL = 'http://localhost:9090/api/v2'
+
+export const BASE_MANDARAKE_LINK = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
 
 app.use(createPinia())
 app.use(router)

src/styles/styles.css

@@ -2,6 +2,10 @@
   margin-top: 10px;
 }
 
+.mb-10 {
+  margin-bottom: 10px;
+}
+
 .mb-20 {
   margin-bottom: 30px;
 }
@@ -53,6 +57,10 @@
   text-align: center;
 }
 
+.text-muted {
+  opacity: 0.6;
+}
+
 .sticky-search-container {
   position: sticky;
   top: 0;
@@ -100,3 +108,15 @@
 :deep(.mobile-full-width) {
   width: 100%;
 }
+
+.default-color{
+  color: #18a058;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.link-like-text {
+  cursor: pointer;
+}

src/views/AddMerchView.vue

@@ -2,11 +2,10 @@
 import router from '@/router/index.js'
 import { computed, ref } from 'vue'
 import { useMerchApi } from '@/api/merch.js'
+import { BASE_MANDARAKE_LINK } from '@/main.js'
 
 const { addMerch } = useMerchApi()
 
-const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
-
 const name = ref('')
 
 // surugaya block
@@ -17,7 +16,7 @@ const checkAutoComplete = ref(true)
 const customLink = ref('')
 
 const mandarakeAutocomplete = computed(() => {
-  return `${mandarakeLink}${name.value}`
+  return `${BASE_MANDARAKE_LINK}${name.value}`
 })
 
 const mandarakeResultLink = computed({

src/views/DetailsView.vue

@@ -6,6 +6,7 @@ import PeriodSelector from '@/components/PeriodSelector.vue'
 import ChartBlock from '@/components/ChartBlock.vue'
 import { useChartsApi } from '@/api/charts.js'
 import EditLink from '@/views/DetailsView/EditLink.vue'
+import CopyToClipboard from '@/components/CopyToClipboard.vue'
 
 const { getMerchDetails, deleteMerch } = useMerchApi()
 const { getDistinctPrices } = useChartsApi()
@@ -17,6 +18,11 @@ const props = defineProps({
   },
 })
 
+const editing = ref({
+  surugaya: false,
+  mandarake: false,
+})
+
 const merchDetails = ref(null)
 const loading = ref(true)
 const error = ref(null)
@@ -76,11 +82,15 @@ const fetchPrices = async (days = 7) => {
   }
 }
 
+function handleLinkUpdate(origin, newLink) {
+  merchDetails.value[`origin_${origin}`].link = newLink
+  editing.value[origin] = false
+}
+
 function handleSelectDays(days) {
   fetchPrices(days)
 }
 
-
 onMounted(() => {
   fetchMerch()
   fetchPrices(7)
@@ -102,20 +112,71 @@ onMounted(() => {
       <ChartBlock :charts-data="prices" />
     </div>
 
-    <n-divider title-placement="left">Surugaya</n-divider>
+    <!-- Surugaya -->
+    <CopyToClipboard :text="merchDetails.origin_surugaya?.link">
+      <n-divider title-placement="left">Surugaya</n-divider>
+    </CopyToClipboard>
+    <div v-if="!editing.surugaya">
+      <template v-if="merchDetails.origin_surugaya?.link">
+        <a
+          :href="merchDetails.origin_surugaya.link"
+          target="_blank"
+          rel="noopener"
+          class="default-color"
+        >
+          {{ merchDetails.origin_surugaya.link }}
+        </a>
+        <n-button type="primary" style="margin-left: 8px" @click="editing.surugaya = true">
+          Edit link
+        </n-button>
+      </template>
+      <template v-else>
+        <span class="default-color underline link-like-text" @click="editing.surugaya = true">Add link</span>
+      </template>
+    </div>
+
     <EditLink
+      v-else
       :merch-uuid="merch_uuid"
       origin="surugaya"
       :name="merchDetails.name"
-      v-model="merchDetails.origin_surugaya.link" />
+      :model-value="merchDetails.origin_surugaya?.link || ''"
+      @update:model-value="handleLinkUpdate('surugaya', $event)"
+      @cancel-edit="editing.surugaya = false"
+    />
+
+    <!-- Mandarake -->
+    <CopyToClipboard :text="merchDetails.origin_mandarake?.link">
+      <n-divider title-placement="left">Mandarake</n-divider>
+    </CopyToClipboard>
+    <div v-if="!editing.mandarake">
+      <template v-if="merchDetails.origin_mandarake?.link">
+        <a
+          :href="merchDetails.origin_mandarake.link"
+          target="_blank"
+          rel="noopener"
+          class="default-color"
+        >
+          {{ merchDetails.origin_mandarake.link }}
+        </a>
+        <n-button type="primary" style="margin-left: 8px" @click="editing.mandarake = true">
+          Edit link
+        </n-button>
+      </template>
+      <template v-else>
+        <span class="default-color underline link-like-text" @click="editing.mandarake = true">Add link</span>
+      </template>
+    </div>
 
-    <n-divider title-placement="left">Mandarake</n-divider>
     <EditLink
+      v-else
       :merch-uuid="merch_uuid"
       origin="mandarake"
       :name="merchDetails.name"
-      v-model="merchDetails.origin_mandarake.link" />
-
+      :model-value="merchDetails.origin_mandarake?.link || ''"
+      @update:model-value="handleLinkUpdate('mandarake', $event)"
+      @cancel-edit="editing.mandarake = false"
+    />
   </n-card>
   <div v-else>Not found</div>
 

src/views/DetailsView/EditLink.vue

@@ -1,33 +1,26 @@
 <script setup>
-import { ref, nextTick, watch, computed } from 'vue'
+import { ref, nextTick } from 'vue'
 import { useMerchApi } from '@/api/merch.js'
+import { BASE_MANDARAKE_LINK } from '@/main.js'
 
 const { updateMerch } = useMerchApi()
 
 const props = defineProps({
   modelValue: {
     type: String,
-    required: true
-  },
-  type: {
-    type: String,
-    default: 'text'
+    required: true,
   },
   placeholder: {
     type: String,
-    default: ''
-  },
-  emptyText: {
-    type: String,
-    default: 'Add link'
+    default: 'Enter link here...',
   },
   merchUuid: {
     type: String,
-    required: true
+    required: true,
   },
   name: {
     type: String,
-    required: true
+    required: true,
   },
   origin: {
     type: String,
@@ -35,32 +28,31 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'cancel-edit'])
 
-const isEditing = ref(false)
 const tempValue = ref('')
 const inputRef = ref(null)
 const loading = ref(false)
 
-const displayValue = computed(() => {
-  const val = props.modelValue.trim()
-  return val === '' || val == null ? props.emptyText : props.modelValue
-})
+tempValue.value = props.modelValue
 
-const startEditing = () => {
-  tempValue.value = props.modelValue
-  isEditing.value = true
-  nextTick(() => {
-    inputRef.value?.focus?.()
-  })
-}
+nextTick(() => {
+  inputRef.value?.focus?.()
+})
 
 const save = async () => {
   const newValue = tempValue.value.trim()
-  if (newValue !== props.modelValue) {
-    emit('update:modelValue', newValue)
+
+  if (newValue === '') {
+    emit('cancel-edit')
+    return
   }
-  isEditing.value = false
+
+  if (newValue === props.modelValue.trim()) {
+    emit('cancel-edit')
+    return
+  }
+
   loading.value = true
 
   try {
@@ -68,7 +60,7 @@ const save = async () => {
       merch_uuid: props.merchUuid,
       name: props.name,
       origin: props.origin,
-      link: newValue
+      link: newValue,
     })
 
     emit('update:modelValue', newValue)
@@ -76,63 +68,91 @@ const save = async () => {
     console.error('Update link error:', error)
   } finally {
     loading.value = false
-    isEditing.value = false
   }
 }
 
+const showModal = ref(false)
+const clearLink = async () => {
+  showModal.value = true
+}
+
+const confirmClearLink = async () => {
+  loading.value = true
+
+  try {
+    await updateMerch({
+      merch_uuid: props.merchUuid,
+      name: props.name,
+      origin: props.origin,
+      link: '',
+    })
+
+    emit('update:modelValue', '')
+  } catch (error) {
+    console.error('Update link error:', error)
+  } finally {
+    loading.value = false
+  }
+  showModal.value = false
+  cancel()
+}
+
 const cancel = () => {
-  isEditing.value = false
+  emit('cancel-edit')
+}
+
+const insertAutoCompletedLink = () => {
+  tempValue.value = BASE_MANDARAKE_LINK+props.name
 }
 
-watch(() => props.modelValue, (newVal) => {
-  if (isEditing.value) {
-    tempValue.value = newVal
-  }
-})
 </script>
 
 <template>
-
-  <span v-if="!isEditing" @click="startEditing" class="editable-text">
-    {{ displayValue }}
-  </span>
-  <div v-else class="editing-area">
+  <div v-if="props.origin === 'mandarake'" class="center-button-container mb-10">
+    <n-button type="warning" class="center-button" @click="insertAutoCompletedLink"
+      >Insert auto-completed link</n-button
+    >
+  </div>
+  <div class="editing-area">
     <n-input
       v-model:value="tempValue"
-      type="text"
-      size="small"
+      type="textarea"
+      size="large"
       ref="inputRef"
       @keyup.enter="save"
       @keyup.esc="cancel"
-      :placeholder="placeholder || 'Enter link here...'"
+      :placeholder="placeholder"
+      :loading="loading"
     />
-    <n-button size="small" type="primary" @click="save">✓</n-button>
-    <n-button size="small" @click="cancel">✕</n-button>
+    <n-button size="small" type="primary" :loading="loading" @click="save">Save</n-button>
+    <n-button size="small" @click="cancel">Cancel</n-button>
   </div>
+  <div class="center-button-container">
+    <n-button type="error" class="center-button" @click="clearLink">Clear link</n-button>
+  </div>
+
+  <n-modal v-model:show="showModal" preset="dialog" title="Confirmation">
+    <template #default>
+      <p>Confirm clear link</p>
+    </template>
+    <template #action>
+      <n-button @click="confirmClearLink" type="error">Clear</n-button>
+      <n-button @click="showModal = false">Cancel</n-button>
+    </template>
+  </n-modal>
 </template>
 
 <style scoped>
-.editable-text {
-  cursor: pointer;
-  text-decoration: underline;
-  color: #18a058;
-  padding: 2px 4px;
-  border-radius: 4px;
-  transition: background 0.2s;
-  min-height: 1.2em;
-  display: inline-block;
-  min-width: 50px;
-}
-
-.editable-text:hover {
-  background-color: #f0f9ff;
-}
-
 .editing-area {
-  display: inline-flex;
+  display: flex;
   gap: 6px;
   align-items: center;
-  vertical-align: middle;
   width: 100%;
+  flex-wrap: wrap;
+}
+
+.editing-area :deep(.n-input) {
+  flex: 1;
+  min-width: 200px;
 }
 </style>