No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Lurrik
    • Profile
    • Following 0
    • Followers 1
    • Topics 1
    • Posts 8
    • Best 5
    • Groups 0

    Lurrik

    @Lurrik

    5
    Reputation
    4
    Profile views
    8
    Posts
    1
    Followers
    0
    Following
    Joined Last Online
    Website erickgolos.com Location France Age 28

    Lurrik Follow

    Best posts made by Lurrik

    • RE: WYSIWYG q-editor lazy rules

      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;
            }
          },
       }
      }
      
      posted in Help
      Lurrik
      Lurrik
    • RE: New video tutorial - Building a Twitter Clone - Check it out!

      Nice 😁 This guy show how Quasar is awesome !

      posted in Announcements
      Lurrik
      Lurrik
    • RE: How to preview image when using q-file picker? [resolved]

      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>
      
      posted in Help
      Lurrik
      Lurrik
    • RE: notify plugin with click action

      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;
              }
      },
      posted in Help
      Lurrik
      Lurrik
    • RE: how to filter cities based on the state selcted

      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>
      
      posted in Help
      Lurrik
      Lurrik

    Latest posts made by Lurrik

    • RE: Incorporating vue-msal-browser

      I’ll admit that I’m a little lost to incorporate msal, I’m trying to use azure in my quasar app…

      Appreciate any help! ^^

      posted in Help
      Lurrik
      Lurrik
    • RE: New video tutorial - Building a Twitter Clone - Check it out!

      Nice 😁 This guy show how Quasar is awesome !

      posted in Announcements
      Lurrik
      Lurrik
    • RE: [Feature request] Is it possible to get to the middle of an infinite scroll

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

      posted in Framework
      Lurrik
      Lurrik
    • RE: notify plugin with click action

      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;
              }
      },
      posted in Help
      Lurrik
      Lurrik
    • RE: how to filter cities based on the state selcted

      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>
      
      posted in Help
      Lurrik
      Lurrik
    • RE: How to preview image when using q-file picker? [resolved]

      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>
      
      posted in Help
      Lurrik
      Lurrik
    • RE: WYSIWYG q-editor lazy rules

      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;
            }
          },
       }
      }
      
      posted in Help
      Lurrik
      Lurrik