Merge pull request #221 from Support-pl/dev

showcase filters when creating instances
Support-pl · Jul 6, 2023 · 871fee3 · 871fee3
2 parents 165000e + 43b4dcd
commit 871fee3
Show file tree

Hide file tree

Showing 16 changed files with 152 additions and 34 deletions.
diff --git a/src/components/appMain/appHeader.vue b/src/components/appMain/appHeader.vue
@@ -23,7 +23,7 @@
           <transition-group
             name="header__item-anim"
             class="header__buttons"
-            v-if="headers[active] && isLogged"
+            v-if="headers[active] && isLogged && isButtonsVisible"
             tag="div"
           >
             <div
@@ -155,6 +155,17 @@
               </div>
             </div>
           </transition-group>
+          <transition v-if="viewport < 576" name="header__item-anim">
+            <div class="header__button" @click="isButtonsVisible = !isButtonsVisible">
+              <div class="icon__wrapper" :style="(isButtonsVisible) ? {
+                borderRadius: '50%',
+                background: 'var(--bright_bg)',
+                color: 'var(--main)'
+              } : null">
+                <a-icon class="header__icon" type="down" />
+              </div>
+            </div>
+          </transition>
           <transition name="header__item-anim">
             <div v-if="isNeedBalance && isLogged" class="header__balance">
               <balance />
@@ -185,6 +196,7 @@ export default {
     return {
       isOpen: false,
       isVisible: false,
+      isButtonsVisible: true,
       indeterminate: true,
       checkAll: false,
       checkedList: [],
@@ -287,7 +299,8 @@ export default {
         },
         iaas: {
           title: "Service",
-          buttons: []
+          needBalance: true,
+          buttons: [],
         }
       },
     };
@@ -440,6 +453,10 @@ export default {
     if (this.$route.query.service) {
       this.headers.iaas.title = this.$route.query.service;
     }
+
+    if (this.viewport < 576) {
+      this.isButtonsVisible = false;
+    }
   },
   computed: {
     ...mapGetters("support", [
@@ -535,6 +552,9 @@ export default {
     },
     user() {
       return this.$store.getters['nocloud/auth/billingData'];
+    },
+    viewport() {
+      return document.documentElement.offsetWidth;
     }
   },
   watch: {
@@ -698,4 +718,17 @@ export default {
   opacity: 0;
   transform: translateY(30px);
 }
+
+@media screen and (max-width: 576px) {
+  .header__buttons {
+    position: absolute;
+    bottom: -35px;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    border-radius: 10px;
+    background: var(--main);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
+  }
+}
 </style>
diff --git a/src/components/appMain/cloud/openCloud/networkControl.vue b/src/components/appMain/cloud/openCloud/networkControl.vue
@@ -43,7 +43,7 @@
       </a-col>
     </a-row>
 
-    <div style="display: flex; justify-content: flex-end; gap: 10px">
+    <div style="display: flex; justify-content: right; gap: 10px">
       <a-button @click="$emit('closeModal')">
         {{ $t('Cancel') }}
       </a-button>

diff --git a/src/components/appMain/cloud/openCloud_new.vue b/src/components/appMain/cloud/openCloud_new.vue
@@ -757,6 +757,7 @@ export default {
   font-weight: bold;
   font-size: 24px;
   line-height: 1;
+  word-wrap: anywhere;
 }
 .Fcloud__status {
   text-transform: uppercase;

diff --git a/src/components/appMain/modules/ione/openInstance.vue b/src/components/appMain/modules/ione/openInstance.vue
@@ -974,7 +974,7 @@ export default {
     },
     statusVM() {
       if (!this.VM) return;
-      if (this.VM.state.meta.state === 1) return {
+      if (this.VM.state.meta.state === 1 || this.VM.data.suspended_manually) return {
         start: true, shutdown: true, reboot: true, recover: true
       }
       return {

diff --git a/src/components/balance/balance.vue b/src/components/balance/balance.vue
@@ -115,6 +115,13 @@ export default {
       if (this.amount == "") this.amount = 0;
       this.amount += amount;
     },
+  },
+  watch: {
+    defaultCurrency(value) {
+      if (this.user.currency_code) return;
+
+      this.$set(this.currency, 'suffix', value);
+    }
   }
 };
 </script>

diff --git a/src/components/empty/empty.vue b/src/components/empty/empty.vue
@@ -1,32 +1,31 @@
 <template>
-  	<div class="none">
+  <div class="none">
 		<div class="smile">:(</div>
-		{{$t('It’s empty...')}}
+		{{ $t('It’s empty...') }}
 	</div>
 </template>
 
 <script>
-export default {
-	name: 'emptyPlaceholder'
-}
+export default { name: 'emptyPlaceholder' }
 </script>
 
 <style>
-
-
-.none{
+.none {
 	display: flex;
-	height: 100%;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
+	height: 100%;
+  padding: 10px 25px;
 	font-size: 32px;
+  text-align: center;
 }
-.smile{
-	transform: rotate(90deg);
-	width: 100px;
+
+.smile {
+  width: 100px;
 	height: 100px;
 	font-size: 64px;
+	transform: rotate(90deg);
 }
 
-</style>
+</style>
diff --git a/src/components/services/acronis/index.vue b/src/components/services/acronis/index.vue
@@ -375,7 +375,17 @@ export default {
     },
     plans() {
       return this.$store.getters['nocloud/plans/getPlans']
-        .filter(({ type }) => type === 'acronis');
+        .filter(({ type, uuid }) => {
+          const provider = this.$store.getters['nocloud/sp/getSP'].find(
+            ({ meta }) => meta.showcase && meta.showcase[this.$route.query.service]
+          );
+
+          if (!provider) return type === 'acronis';
+          const { billing_plans } = provider.meta.showcase[this.$route.query.service];
+
+          if (billing_plans.length < 1) return type === 'acronis';
+          return type === 'acronis' && billing_plans.includes(uuid);
+        });
     },
     sp() {
       return this.$store.getters['nocloud/sp/getSP']

diff --git a/src/components/services/custom/index.vue b/src/components/services/custom/index.vue
@@ -377,7 +377,17 @@ export default {
     },
     plans() {
       return this.$store.getters['nocloud/plans/getPlans']
-        .filter(({ type }) => type === 'virtual');
+        .filter(({ type, uuid }) => {
+          const provider = this.$store.getters['nocloud/sp/getSP'].find(
+            ({ meta }) => meta.showcase && meta.showcase[this.$route.query.service]
+          );
+
+          if (!provider) return type === 'virtual';
+          const { billing_plans } = provider.meta.showcase[this.$route.query.service];
+
+          if (billing_plans.length < 1) return type === 'virtual';
+          return type === 'virtual' && billing_plans.includes(uuid);
+        });
     },
     sp() {
       return this.$store.getters['nocloud/sp/getSP']
@@ -812,6 +822,15 @@ export default {
 	.order__template-name ul li{
 		margin-left: 20px;
 	}
+  .product__specs {
+    width: 100%;
+  }
+  .product__specs td {
+    padding: 3px 7px;
+  }
+  .product__specs td:last-child::before {
+    transform: translate(-10px, -50%);
+  }
 }
 
 .specs-enter-active,

diff --git a/src/components/services/domains/order.vue b/src/components/services/domains/order.vue
@@ -630,7 +630,17 @@ export default {
     },
     plans() {
       return this.$store.getters['nocloud/plans/getPlans']
-        .filter(({ type }) => type === 'opensrs');
+        .filter(({ type, uuid }) => {
+          const provider = this.$store.getters['nocloud/sp/getSP'].find(
+            ({ meta }) => meta.showcase && meta.showcase[this.$route.query.service]
+          );
+
+          if (!provider) return type === 'opensrs';
+          const { billing_plans } = provider.meta.showcase[this.$route.query.service];
+
+          if (billing_plans.length < 1) return type === 'opensrs';
+          return type === 'opensrs' && billing_plans.includes(uuid);
+        });
     },
     rules() {
       const message = this.$t('ssl_product.field is required');

diff --git a/src/components/services/iaas/index.vue b/src/components/services/iaas/index.vue
@@ -367,8 +367,7 @@ export default {
         } else if (product.paytype === 'onetime') {
           product.price = { value: product.price.monthly, currency: '' }
         } else {
-          console.log(product.price);
-          product.price = product.price.find(({ currency }) => currency === this.currency.id)
+          product.price = product.price.find(({ currency }) => currency === this.currency.id) ?? {}
         }
         product.price.currency = this.currency.code
 
@@ -425,6 +424,10 @@ export default {
     }
 	},
 	created() {
+    if (this.currencies.length < 1) {
+      this.$store.dispatch('nocloud/auth/fetchCurrencies');
+    }
+
     this.$api.get(this.baseURL, { params: { run: 'get_currencies' } })
       .then((res) => { this.currencies = res.currency })
 			.catch(err => {
@@ -897,6 +900,15 @@ export default {
 	.order__template-name ul li{
 		margin-left: 20px;
 	}
+  .product__specs {
+    width: 100%;
+  }
+  .product__specs td {
+    padding: 3px 7px;
+  }
+  .product__specs td:last-child::before {
+    transform: translate(-10px, -50%);
+  }
 }
 
 .specs-enter-active,

diff --git a/src/components/services/services_wrapper.vue b/src/components/services/services_wrapper.vue
@@ -103,7 +103,7 @@ export default {
       const provider = service.onclick.paramsArr[0].query.service;
       const { type } = this.sp.find(({ meta }) => (meta.showcase ?? {})[provider]) ?? {};
       let name = 'service-virtual';
-      let query = {};
+      let query = { service: provider };
 
       switch (type) {
         case 'opensrs':
@@ -121,12 +121,10 @@ export default {
         case 'ione':
         case 'ovh':
           name = 'newPaaS';
-          query = { service: provider }
       }
 
       if (!type && this.services[provider]) {
         name = 'service-iaas';
-        query = { service: provider }
       }
 
       this.$router.push({ name, query });

diff --git a/src/components/services/ssl/index.vue b/src/components/services/ssl/index.vue
@@ -458,7 +458,17 @@ export default {
     },
     plans() {
       return this.$store.getters['nocloud/plans/getPlans']
-        .filter(({ type }) => type === 'goget');
+        .filter(({ type, uuid }) => {
+          const provider = this.$store.getters['nocloud/sp/getSP'].find(
+            ({ meta }) => meta.showcase && meta.showcase[this.$route.query.service]
+          );
+
+          if (!provider) return type === 'goget';
+          const { billing_plans } = provider.meta.showcase[this.$route.query.service];
+
+          if (billing_plans.length < 1) return type === 'goget';
+          return type === 'goget' && billing_plans.includes(uuid);
+        });
     }
 	},
 	created() {

diff --git a/src/components/services/virtual/index.vue b/src/components/services/virtual/index.vue
@@ -747,6 +747,15 @@ export default {
 	.order__template-name ul li{
 		margin-left: 20px;
 	}
+  .product__specs {
+    width: 100%;
+  }
+  .product__specs td {
+    padding: 3px 7px;
+  }
+  .product__specs td:last-child::before {
+    transform: translate(-10px, -50%);
+  }
 }
 
 .specs-enter-active,

diff --git a/src/components/userProducts/userProducts.vue b/src/components/userProducts/userProducts.vue
@@ -406,7 +406,7 @@ export default {
       const services = this.$store.getters['products/getServices'];
       const { type } = this.sp.find(({ meta }) => (meta.showcase ?? {})[this.queryTypes[0]]) ?? {};
       let name = 'service-virtual';
-      let query = {};
+      let query = { service: this.queryTypes[0] };
 
       switch (type) {
         case 'opensrs':
@@ -424,12 +424,10 @@ export default {
         case 'ione':
         case 'ovh':
           name = 'newPaaS';
-          query = { service: this.queryTypes[0] };
       }
 
       if (!type && services[this.queryTypes[0]]) {
         name = 'service-iaas';
-        query = { service: this.queryTypes[0] };
       }
 
       this.$router.push({ name, query });

diff --git a/src/routes/register.vue b/src/routes/register.vue
@@ -146,7 +146,7 @@
 				<div class="register__already-has" style="margin-top: 40px">
 					<router-link :to="{name: 'login'}">{{$t('clientinfo.already have account?') | capitalize}}</router-link>
 				</div>
-        <div class="register__already-has" style="margin-top: 10px">
+        <div class="register__already-has" style="margin: 10px 0 30px">
           <a-checkbox v-model="invoiceChecked">{{$t('Invoice is needed')}}</a-checkbox>
         </div>
 			</div>
@@ -300,6 +300,13 @@ export default {
 	grid-gap: 15px
 }
 
+.logo__image img {
+  display: block;
+  max-width: 100vw;
+  max-height: 130px;
+  margin: 0 auto;
+}
+
 .pos_top{
 	flex-direction: column-reverse;
 }
@@ -515,6 +522,11 @@ export default {
 		margin-top: 40px;
 	}
 
+  .logo__image img {
+    max-width: 50vw;
+    max-height: 50vh;
+  }
+
 	#qrcode{
 		display: inline-block;
 	}