media_player_client/src/components/PlanTree.vue

<template>
  <div>
    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
      <template v-slot:default-header="prop">
        <q-item
          class="full-width"
          clickable
          @dblclick="
            (evt) => !prop.node.is_group && runPlan(prop.node.item_data)
          "
        >
          <q-item-section avatar>
            <q-icon
              :name="
                prop.node.is_group
                  ? 'img:source_icon/group.png'
                  : 'img:source_icon/hdmi.png'
              "
              color="orange"
              size="28px"
              class="q-mr-sm"
            />
          </q-item-section>
          <q-item-section>
            <div class="text-weight-bold text-primary">
              {{ prop.node.name }}
            </div>
          </q-item-section>
          <q-popup-proxy context-menu>
            <q-popup-proxy context-menu />
            <q-list>
              <q-item
                v-if="
                  prop.node.name == $t('root') ||
                  (prop.node.is_group && prop.node.item_data)
                "
                clickable
                v-close-popup
                v-ripple
                @click="
                  $refs.plan_dialog.showDialog({
                    type: 1,
                    data: { uuid: prop.node.uuid },
                  })
                "
              >
                <q-item-section avatar><q-icon name="add" /></q-item-section>
                <q-item-section>{{ $t("add plan item") }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                v-if="
                  prop.node.name == $t('root') ||
                  (prop.node.is_group && prop.node.item_data)
                "
                v-ripple
                @click="
                  () =>
                    $refs.group_dialog.showDialog({
                      type: 1,
                      data: prop.node,
                    })
                "
              >
                <q-item-section avatar
                  ><q-icon name="create_new_folder"
                /></q-item-section>
                <q-item-section>{{ $t("add group") }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-ripple
                v-close-popup
                v-if="prop.node.item_data"
                @click="
                  () =>
                    (prop.node.is_group
                      ? $refs.group_dialog
                      : $refs.plan_dialog
                    ).showDialog({
                      type: 2,
                      data: prop.node,
                    })
                "
              >
                <q-item-section avatar><q-icon name="edit" /></q-item-section>
                <q-item-section>{{ $t("edit") }}</q-item-section>
              </q-item>

              <q-item
                clickable
                v-ripple
                v-close-popup
                v-if="prop.node.item_data"
                @click="
                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
                "
              >
                <q-item-section avatar
                  ><q-icon color="red" name="delete"
                /></q-item-section>
                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
              </q-item>
            </q-list>
          </q-popup-proxy>
        </q-item>
      </template>
    </q-tree>
  </div>
  <plan-group-dialog ref="group_dialog" />
  <plan-dialog ref="plan_dialog" />
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
import { useStore } from "src/store";
import PlanGroupDialog from "src/components/PlanGroupDialog.vue";
import PlanDialog from "src/components/PlanDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import { PlanEntity } from "src/entities/PlanEntity";
import { NotifyMessage } from "src/common/ClientConnection";

export default defineComponent({
  name: "PagePlanTree",

  components: { PlanGroupDialog, PlanDialog },

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

    const tree_nodes = computed({
      get: () => $store.state.plan_tree,
      set: (val) => {},
    });

    const tree: any | null = ref(null);

    onMounted(async () => {
      while (!tree.value.nodes.length) {
        await Common.waitFor(100);
      }
      tree.value?.setExpanded("", true);
    });

    return {
      tree,
      tree_nodes,
      loga(a: any) {
        console.log(a);
      },
      async deleteItem(
        evt: PointerEvent | null,
        is_group: boolean,
        uuid: string
      ) {
        let success = false;
        if (is_group) {
          let response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.deletePlanGroup(uuid);
          if (response) {
            success = response.success;
          }
        } else {
          let response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.deletePlan(uuid);
          if (response) {
            success = response.success;
          }
        }

        $q.notify({
          color: success ? "positive" : "negative",
          icon: success ? "done" : "warning",
          message:
            $t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
          position: "top",
          timeout: 1000,
        });
      },
      runPlan(item: PlanEntity) {
        GlobalData.getInstance().getCurrentClient()?.runPlan(item.uuid);
        $q.notify({
          color: "positive",
          icon: "done",
          message: $t.t("run plan directives send") + $t.t("success") + "!",
          position: "top",
          timeout: 1000,
        });
      },
    };
  },
});
</script>