media_player_client/src/components/WindowRectEditDialog.vue

<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 50vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("window rect") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 40vh; width: 50vw" class="scroll">
          <q-list>
            <q-item class="text-center text-h6">
              <q-item-section>
                <q-item-label>
                  <span>{{ $t("desktop width") }}: </span>
                  <span>
                    {{ $store.state.device_screen_width }}
                  </span>
                  <span>{{ $t("px") }}</span>
                </q-item-label>
              </q-item-section>
              <q-item-section>
                <q-item-label>
                  <span>{{ $t("desktop height") }}: </span>
                  <span>
                    {{ $store.state.device_screen_height }}
                  </span>
                  <span>{{ $t("px") }}</span>
                </q-item-label>
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>
                <q-item>
                  <q-item-section avatar>
                    <span class="q-mb-md">{{ $t("X") }}:</span>
                  </q-item-section>
                  <q-item-section>
                    <q-input
                      autofocus
                      type="number"
                      min="0"
                      v-model="window_rect.x"
                      :rules="[
                        (val) =>
                          (val != null &&
                            val != undefined &&
                            val.toString().length > 0) ||
                          $t('Please type something'),
                        (val) =>
                          parseInt(val) >= 0 ||
                          $t('the number must be greater than 0'),
                      ]"
                      lazy-rules
                    >
                      <template v-slot:append>
                        <span class="input_append">{{ $t("px") }}</span>
                      </template>
                    </q-input>
                  </q-item-section>
                </q-item>
              </q-item-section>

              <q-item-section>
                <q-item>
                  <q-item-section avatar>
                    <span class="q-mb-md">{{ $t("Y") }}:</span>
                  </q-item-section>
                  <q-item-section>
                    <q-input
                      type="number"
                      min="0"
                      v-model="window_rect.y"
                      :rules="[
                        (val) =>
                          (val != null &&
                            val != undefined &&
                            val.toString().length > 0) ||
                          $t('Please type something'),
                        (val) =>
                          parseInt(val) >= 0 ||
                          $t('the number must be greater than 0'),
                      ]"
                      lazy-rules
                    >
                      <template v-slot:append>
                        <span class="input_append">{{ $t("px") }}</span>
                      </template>
                    </q-input>
                  </q-item-section>
                </q-item>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-item>
                  <q-item-section avatar>
                    <span class="q-mb-md">{{ $t("width") }}:</span>
                  </q-item-section>
                  <q-item-section>
                    <q-input
                      type="number"
                      min="1"
                      v-model="window_rect.width"
                      :rules="[
                        (val) =>
                          (val != null &&
                            val != undefined &&
                            val.toString().length > 0) ||
                          $t('Please type something'),
                        (val) =>
                          parseInt(val) >= 1 ||
                          $t('the number must be greater than 1'),
                      ]"
                      lazy-rules
                    >
                      <template v-slot:append>
                        <span class="input_append">{{ $t("px") }}</span>
                      </template>
                    </q-input>
                  </q-item-section>
                </q-item>
              </q-item-section>

              <q-item-section>
                <q-item>
                  <q-item-section avatar>
                    <span class="q-mb-md">{{ $t("height") }}:</span>
                  </q-item-section>
                  <q-item-section>
                    <q-input
                      type="number"
                      min="1"
                      v-model="window_rect.height"
                      :rules="[
                        (val) =>
                          (val != null &&
                            val != undefined &&
                            val.toString().length > 0) ||
                          $t('Please type something'),
                        (val) =>
                          parseInt(val) >= 1 ||
                          $t('the number must be greater than 1'),
                      ]"
                      lazy-rules
                    >
                      <template v-slot:append>
                        <span class="input_append">{{ $t("px") }}</span>
                      </template>
                    </q-input>
                  </q-item-section>
                </q-item>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            :loading="loading"
            flat
            :label="$t('Cancel')"
            no-caps
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('Accept')"
            no-caps
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.input_append {
  font-size: 1rem;
}
</style>

<script lang="ts">
import { defineComponent, ref, watch, computed, reactive } from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";

export default defineComponent({
  name: "ComponentWindowRectEditDialog",

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);

    const window_rect = reactive({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      clean: function () {
        this.x = 0;
        this.y = 0;
        this.width = 0;
        this.height = 0;
      },

      formartNumber: function () {
        this.x = parseInt(<any>this.x);
        this.y = parseInt(<any>this.y);
        this.width = parseInt(<any>this.width);
        this.height = parseInt(<any>this.height);
      },
    });

    let _resolve: any = null;
    let _reject: any = null;

    const clean_promise = () => {
      try {
        if (_resolve && typeof _resolve == "function") {
          _resolve(null);
        } else if (_reject && typeof _reject == "function") {
          _reject(null);
        }
        _resolve = null;
        _reject = null;
      } catch {}
    };

    return {
      show_dialog,
      loading,
      window_rect,

      showDialog() {
        throw "please use showDialogAsync function";
      },
      showDialogAsync(x: number, y: number, width: number, height: number) {
        return new Promise((resolve, reject) => {
          clean_promise();
          window_rect.clean();
          window_rect.x = Math.round(x);
          window_rect.y = Math.round(y);
          window_rect.width = Math.round(width);
          window_rect.height = Math.round(height);

          _resolve = resolve;
          _reject = reject;

          show_dialog.value = true;
        });
      },
      resetData() {
        show_dialog.value = false;
        loading.value = false;
        if (_reject) {
          try {
            _reject(null);
          } catch {}
        }
        _resolve = null;
        _reject = null;
      },
      onSubmit() {
        loading.value = true;

        window_rect.formartNumber();

        const resolve_data = () => {
          if (_resolve) {
            try {
              _resolve(window_rect);
            } catch {}
          }
          _resolve = null;
          _reject = null;
          loading.value = false;
          show_dialog.value = false;
        };

        if (
          window_rect.x + window_rect.width >
            $store.state.device_screen_width ||
          window_rect.y + window_rect.height > $store.state.device_screen_height
        ) {
          $q.dialog({
            title: $t.t("Warning"),
            message:
              $t.t(
                "set the window rectangle beyond the desktop rectangle, the window rectangle will be clipped, are you sure to use this window rectangle"
              ) + "?",
            cancel: true,
            persistent: true,
          })
            .onOk(() => resolve_data())
            .onCancel(() => (loading.value = false));
        } else {
          resolve_data();
        }
      },
    };
  },
});
</script>