media_player_client/src/components/ListJointActionEquipmentDialog.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: 45vw">
      <q-form>
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("joint action equipment") }}{{ $t("list") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                :disable="loading"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section style="height: 50vh; width: 45vw" class="scroll">
          <q-scroll-area style="height: 46vh">
            <q-list class="fit">
              <q-item
                clickable
                v-for="(item, index) of equipments"
                :key="index"
              >
                <q-item-section>
                  <q-item-label>{{ item.name }}</q-item-label>
                  <q-item-label caption>{{ item.address }}</q-item-label>
                </q-item-section>

                <q-space />
                <q-item-section avatar>
                  <q-btn
                    round
                    @click="editEquipment(item)"
                    flat
                    icon="edit"
                    color="blue"
                  >
                    <q-tooltip>
                      {{ $t("edit") }}
                    </q-tooltip>
                  </q-btn>
                </q-item-section>
                <q-item-section avatar>
                  <q-btn
                    @click="deleteEquipment(item)"
                    round
                    flat
                    icon="delete"
                    color="red"
                  >
                    <q-tooltip>
                      {{ $t("delete") }}
                    </q-tooltip>
                  </q-btn>
                </q-item-section>
              </q-item>
            </q-list>
          </q-scroll-area>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn
            :loading="loading"
            flat
            :label="$t('Close')"
            :disable="loading"
            no-caps
            color="primary"
            v-close-popup
          />
          <q-btn
            :loading="loading"
            flat
            :label="$t('add') + $t('equipment')"
            no-caps
            color="primary"
            @click="$refs.edit_joint_action_equipment_dialog.showDialog()"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
  <edit-joint-action-equipment-dialog
    ref="edit_joint_action_equipment_dialog"
  />
</template>

<style scoped>
.disable_tree {
  background: #9e9e9e;
  cursor: wait;
  pointer-events: none;
}
</style>

<script lang="ts">
import { defineComponent, ref, watch, computed, Ref, nextTick } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import EditJointActionEquipmentDialog from "src/components/EditJointActionEquipmentDialog.vue";
import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
import EventBus, { EventNamesDefine } from "src/common/EventBus";

export default defineComponent({
  name: "ComponentListJointActionEquipmentDialog",
  components: { EditJointActionEquipmentDialog },

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

    const edit_joint_action_equipment_dialog: Ref<any> = ref(null);

    let show_dialog = ref(false);
    const loading = ref(false);
    const equipments: Ref<Array<JointActionEquipmentTableEntity>> = ref([]);

    const refresh_joint_action_equipment_list = () => {
      GlobalData.getInstance()
        .getCurrentClient()
        ?.getJointActionEquipments()
        .then(async (response) => {
          if (response) {
            await nextTick(() => {});
            equipments.value = response.entities;
          }
        });
    };

    EventBus.getInstance().on(
      EventNamesDefine.RefreshJointActionEquipmentList,
      () => {
        refresh_joint_action_equipment_list();
      }
    );

    return {
      show_dialog,
      loading,
      equipments,

      edit_joint_action_equipment_dialog,

      showDialog() {
        refresh_joint_action_equipment_list();
        show_dialog.value = true;
      },
      resetData() {},
      deleteEquipment(
        entity: JointActionEquipmentTableEntity | undefined | null
      ) {
        if (entity) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.deleteJointActionEquipment(entity.uuid)
            .then((response) => {
              if (response && response.success) {
                EventBus.getInstance().emit(
                  EventNamesDefine.RefreshJointActionEquipmentList
                );
              }
            });
        }
      },
      editEquipment(
        entity: JointActionEquipmentTableEntity | undefined | null
      ) {
        if (entity) {
          if (edit_joint_action_equipment_dialog.value) {
            edit_joint_action_equipment_dialog.value.showDialog(entity);
          }
        }
      },
    };
  },
});
</script>