nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-25 22:24:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Language editor refactoring part 3 (backend + frontend)

Browse Source
This commit is contained in:
Peter Papp
2021-04-01 07:50:01 +02:00
parent a8fa3694be
commit 5130082111
15 changed files with 448 additions and 903 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/CreateLanguage.vue
+48 -46
View File
@@ -2,46 +2,46 @@
<PopupWrapper name="create-language">
<!--Title-->
<PopupHeader :title="'Create Language'" icon="edit" />
<!--TODO: jazyk-->
<PopupHeader title="Create Language" icon="edit" />
<!--Content-->
<PopupContent>
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<!--Set password-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Name" rules="required" v-slot="{ errors }">
<label class="input-label">Type Name:</label>
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" placeholder="Type Language Name">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Set password-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Locale" rules="required" v-slot="{ errors }">
<label class="input-label">Select Locale:</label>
<SelectInput v-model="locale" :options="allLocals" placeholder="Select Language Locale" :isError="errors[0]"/>
<SelectInput v-model="form.locale" :options="locals" placeholder="Select Language Locale" :isError="errors[0]" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Name" rules="required" v-slot="{ errors }">
<label class="input-label">Type Name:</label>
<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" placeholder="Type Language Name">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
</PopupContent>
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>Cancel
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>
Cancel
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="createLanguage"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>Create Language
class="popup-button"
@click.native="createLanguage"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>
Create Language
</ButtonBase>
</PopupActions>
</PopupWrapper>
@@ -74,10 +74,12 @@ export default {
},
data() {
return {
name: undefined,
locale: undefined,
form: {
name: undefined,
locale: undefined,
},
isLoading: false,
allLocals: [
locals: [
{
value: "ab",
label: "Abkhaz"
@@ -823,43 +825,43 @@ export default {
},
methods: {
async createLanguage() {
// Validate fields
const isValid = await this.$refs.createForm.validate();
if (isValid) {
this.isLoading = true
this.isLoading = true
axios.post('/api/languages', {
name: this.name,
locale: this.locale
})
.then((response) => {
axios.post('/api/admin/languages', this.form)
.then(response => {
events.$emit('reload:languages', response.data)
})
.catch(() => {
this.$isSomethingWrong()
})
.finally(() => {
events.$emit('add-language', response.data)
})
.catch(() => Vue.prototype.$isSomethingWrong())
.finally(() => {
this.form = {
name: undefined,
locale: undefined,
}
this.name = undefined
this.locale = undefined
this.isLoading = false
this.$closePopup()
})
this.isLoading = false
this.$closePopup()
})
}
},
},
mounted () {
mounted() {
this.name = undefined,
this.locale = undefined
this.locale = undefined
}
}
</script>
<style scoped lang="scss">
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
@import "@assets/vuefilemanager/_inapp-forms.scss";
@import '@assets/vuefilemanager/_forms';
.item-thumbnail {
margin-bottom: 20px;
resources/js/components/Others/Forms/SearchInput.vue
+108
View File
@@ -0,0 +1,108 @@
<template>
<div class="search-bar">
<div v-if="!query" class="icon">
<search-icon size="19" />
</div>
<div @click="clearInput" v-if="query" class="icon">
<x-icon class="pointer" size="19"></x-icon>
</div>
<input
v-model="query"
@input="$emit('input', query)"
class="query"
type="text"
name="searchInput"
placeholder="Search Language Strings..."
/>
</div>
</template>
<script>
import {SearchIcon, XIcon} from 'vue-feather-icons'
export default {
name: 'SearchInput',
components: {
SearchIcon,
XIcon,
},
data() {
return {
query: undefined,
}
},
methods: {
clearInput() {
this.query = undefined
this.$emit('reset-query')
},
},
}
</script>
<style lang="scss" scoped>
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_forms';
.search-bar {
padding: 7px 0px;
position: relative;
width: 100%;
border-radius: 8px;
input {
background: $light_background;
border-radius: 8px;
outline: 0;
padding: 9px 20px 9px 43px;
font-weight: 700;
@include font-size(16);
width: 100%;
height: 50px;
min-width: 175px;
transition: 0.15s all ease;
border: 1px solid transparent;
-webkit-appearance: none;
box-shadow: none;
&::placeholder {
color: $light_text;
@include font-size(14);
font-weight: 700;
}
&:focus {
border: 1px solid $theme;
box-shadow: 0 0 7px rgba($theme, 0.3);
}
&:focus + .icon {
path {
fill: $theme;
}
}
}
.icon {
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 11px 15px;
display: flex;
align-items: center;
circle,
line {
color: $light_text;
}
.pointer {
cursor: pointer;
}
}
}
</style>