No More Posting New Topics!

Lurrik

It’s not beauty, but that’s works :

TEMPLATE

<div>
           <i
            aria-hidden="true"
            v-show="showWarning"
           role="presentation"
           class="absolute-top-right q-pt-xs q-pr-sm material-icons q-icon notranslate text-negative"
          style="font-size: 25px"
           >error</i>

           <q-editor
            v-model="message"
            :style="styleWYSIWYG"
            @blur="checkMessage"
            :toolbar="[
             // Your config
            ]"
            :fonts="{
             // Your config
            }"
          />
 </div>

SCRIPT

export default {
  name: "",
  data() {
    return {
      message : "",
      styleWYSIWYG:  "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      styleWarningWYSIWYG: "border: 2px solid;border-color: #C10015;border-radius:5px;",
      styleBasicWYSIWYG: "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      showWarning: false,
    };
  },
methods: {
    checkMessage() {
      if (this.message == "") {
        this.styleWYSIWYG = this.styleWarningWYSIWYG;
        this.showWarning = true;
      } else {
        this.styleWYSIWYG = this.styleBasicWYSIWYG;
        this.showWarning = false;
      }
    },
 }
}

Lurrik

Nice This guy show how Quasar is awesome !

Lurrik

Hi @Gorgc

Without q-file you can do something like that :

TEMPLATE

    <q-card style="width:500px">
          <q-card-section class="text-subitle2">
            <div :style="{ 'background-image': `url(${imageData})` }" @click="choosepicture">
              <span
                v-if="!imageData"
                class="placeholder"
                style="cursor: pointer"
              >Choose a picture</span>
              <input hidden class="file-input" ref="fileInput" type="file" @input="onSelectFile" />
            </div>
            <q-img :src="imageData" style="cursor: pointer" @click="choosepicture" />
          </q-card-section>
      </q-card>

SCRIPT

<script>
export default {
  name: '',
  data() {
    return {
      imageData: null,
    }
  },
  methods: {
    onSelectFile() {
      const input = this.$refs.fileInput;
      const files = input.files;
      this.FileImage = files[0];
      if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
        };
        reader.readAsDataURL(files[0]);
        this.$emit("input", files[0]);
      }
    },
    choosepicture() {
      this.$refs.fileInput.click();
    },
  },
}
</script>

Lurrik

Hi @s-light,

I made a remove item with the possibility to cancel before the remove ^^

TEMPLATE

<q-btn
     flat
     color="red"
     @click="removeAlerts"
     v-close-popup
    />

SCRIPT

 methods: {
    removeAlerts() {
          this.$q.notify({
            progress: true,
            message: "Item delete",
            color: "red",
            icon: "fa fa-trash", //with font awesome
            actions: [
              {
                label: "Cancel",
                color: "white",
                handler: () => {
                  this.cancelRemove = false;
                }
              }
            ]
          });
    
          setTimeout(() => {
            if (this.cancelRemove) {
              delete this.data[this.data.id];
            }
          }, 6000);
 
          this.cancelRemove = true;
        }
},

Lurrik

Hi @thri60,

Try this (sorry I don’t use a Json file but what I did is the same, that can be usefull for others who don’t use Json file) :

TEMPLATE

<template>
  <q-page class="flex flex-center">
  <div class="q-gutter-md" style="width:250px">
    <div>
      <q-select
        behavior="menu"
        rounded
        outlined
        v-model="ModelState"
        :options="states"
        label="Located in what State"
        @input="pushCity"
        style=""
        />
      </div>
      <div>
      <q-select
        behavior="menu"
        rounded
        outlined
        v-model="Modelcity"
        :options="city"
        label="City"
        />
      </div>
  </div>
  </q-page>
</template>

SCRIPT

<script>
export default {
  data() {
    return {
        ModelState: null,
        states: [],
        Modelcity: null,
        city: [],
        location :[
          {
            state: {
                name: "Abia State",
                id: 1,
                locals: [
                { name: "Aba South", id: 1 },
                { name: "Arochukwu", id: 2 },
                { name: "Bende", id: 3 },
                { name: "Ikwuano", id: 4 },
                { name: "Isiala Ngwa North", id: 5 },
                { name: "Isiala Ngwa South", id: 6 },
                { name: "Isuikwuato", id: 7 },
                { name: "Obi Ngwa", id: 8 },
                { name: "Ohafia", id: 9 },
                { name: "Osisioma", id: 10 },
                { name: "Ugwunagbo", id: 11 },
                { name: "Ukwa East", id: 12 },
                { name: "Ukwa West", id: 13 },
                { name: "Umuahia North", id: 14 },
                { name: "Umuahia South", id: 15 },
                { name: "Umu Nneochi", id: 16 }
                ]
            }
        },
        {
          state: {
          name: "France",
            id: 2,
                locals: [
                { name: "Paris", id: 1 },
                ]
          }
        }
        ]
    }
  },
  methods: {
    pushCity() {
        const isnameAdd = (element) => element.state.name == this.ModelState;
        const index = this.location.findIndex(isnameAdd);
        this.city = []
        this.location[index].state.locals.forEach(element => {
          const name = element.name;
          this.city.push(name);
        });
    }
  },
  mounted() {
    this.location.forEach(element => {
    const name = element.state.name;
    this.states.push(name);
    });
  }
}
</script>

Lurrik

Nice This guy show how Quasar is awesome !

Lurrik

Hi @nokogiri, can you provide a “picture example” what you want ? ^^ I can’t imagine exactly what you want

Lurrik

Hi @s-light,

I made a remove item with the possibility to cancel before the remove ^^

TEMPLATE

<q-btn
     flat
     color="red"
     @click="removeAlerts"
     v-close-popup
    />

SCRIPT

 methods: {
    removeAlerts() {
          this.$q.notify({
            progress: true,
            message: "Item delete",
            color: "red",
            icon: "fa fa-trash", //with font awesome
            actions: [
              {
                label: "Cancel",
                color: "white",
                handler: () => {
                  this.cancelRemove = false;
                }
              }
            ]
          });
    
          setTimeout(() => {
            if (this.cancelRemove) {
              delete this.data[this.data.id];
            }
          }, 6000);
 
          this.cancelRemove = true;
        }
},

Lurrik

Hi @thri60,

Try this (sorry I don’t use a Json file but what I did is the same, that can be usefull for others who don’t use Json file) :

TEMPLATE

<template>
  <q-page class="flex flex-center">
  <div class="q-gutter-md" style="width:250px">
    <div>
      <q-select
        behavior="menu"
        rounded
        outlined
        v-model="ModelState"
        :options="states"
        label="Located in what State"
        @input="pushCity"
        style=""
        />
      </div>
      <div>
      <q-select
        behavior="menu"
        rounded
        outlined
        v-model="Modelcity"
        :options="city"
        label="City"
        />
      </div>
  </div>
  </q-page>
</template>

SCRIPT

<script>
export default {
  data() {
    return {
        ModelState: null,
        states: [],
        Modelcity: null,
        city: [],
        location :[
          {
            state: {
                name: "Abia State",
                id: 1,
                locals: [
                { name: "Aba South", id: 1 },
                { name: "Arochukwu", id: 2 },
                { name: "Bende", id: 3 },
                { name: "Ikwuano", id: 4 },
                { name: "Isiala Ngwa North", id: 5 },
                { name: "Isiala Ngwa South", id: 6 },
                { name: "Isuikwuato", id: 7 },
                { name: "Obi Ngwa", id: 8 },
                { name: "Ohafia", id: 9 },
                { name: "Osisioma", id: 10 },
                { name: "Ugwunagbo", id: 11 },
                { name: "Ukwa East", id: 12 },
                { name: "Ukwa West", id: 13 },
                { name: "Umuahia North", id: 14 },
                { name: "Umuahia South", id: 15 },
                { name: "Umu Nneochi", id: 16 }
                ]
            }
        },
        {
          state: {
          name: "France",
            id: 2,
                locals: [
                { name: "Paris", id: 1 },
                ]
          }
        }
        ]
    }
  },
  methods: {
    pushCity() {
        const isnameAdd = (element) => element.state.name == this.ModelState;
        const index = this.location.findIndex(isnameAdd);
        this.city = []
        this.location[index].state.locals.forEach(element => {
          const name = element.name;
          this.city.push(name);
        });
    }
  },
  mounted() {
    this.location.forEach(element => {
    const name = element.state.name;
    this.states.push(name);
    });
  }
}
</script>

Lurrik

Hi @Gorgc

Without q-file you can do something like that :

TEMPLATE

    <q-card style="width:500px">
          <q-card-section class="text-subitle2">
            <div :style="{ 'background-image': `url(${imageData})` }" @click="choosepicture">
              <span
                v-if="!imageData"
                class="placeholder"
                style="cursor: pointer"
              >Choose a picture</span>
              <input hidden class="file-input" ref="fileInput" type="file" @input="onSelectFile" />
            </div>
            <q-img :src="imageData" style="cursor: pointer" @click="choosepicture" />
          </q-card-section>
      </q-card>

SCRIPT

<script>
export default {
  name: '',
  data() {
    return {
      imageData: null,
    }
  },
  methods: {
    onSelectFile() {
      const input = this.$refs.fileInput;
      const files = input.files;
      this.FileImage = files[0];
      if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
        };
        reader.readAsDataURL(files[0]);
        this.$emit("input", files[0]);
      }
    },
    choosepicture() {
      this.$refs.fileInput.click();
    },
  },
}
</script>

Lurrik

Hi @Gorgc,

It’s not beauty, but that’s works :

TEMPLATE

<div>
           <i
            aria-hidden="true"
            v-show="showWarning"
           role="presentation"
           class="absolute-top-right q-pt-xs q-pr-sm material-icons q-icon notranslate text-negative"
          style="font-size: 25px"
           >error</i>

           <q-editor
            v-model="message"
            :style="styleWYSIWYG"
            @blur="checkMessage"
            :toolbar="[
             // Your config
            ]"
            :fonts="{
             // Your config
            }"
          />
 </div>

SCRIPT

export default {
  name: "",
  data() {
    return {
      message : "",
      styleWYSIWYG:  "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      styleWarningWYSIWYG: "border: 2px solid;border-color: #C10015;border-radius:5px;",
      styleBasicWYSIWYG: "border: 1px solid;border-color: #D1CDC8;border-radius:5px;",
      showWarning: false,
    };
  },
methods: {
    checkMessage() {
      if (this.message == "") {
        this.styleWYSIWYG = this.styleWarningWYSIWYG;
        this.showWarning = true;
      } else {
        this.styleWYSIWYG = this.styleBasicWYSIWYG;
        this.showWarning = false;
      }
    },
 }
}

No More Posting New Topics!

Lurrik

@Lurrik

Best posts made by Lurrik

Latest posts made by Lurrik