DashboardAction.vue

<template>
  <q-expansion-item
    :key="action.uuid"
    v-if="action.children && action.children.length"
    :icon="action.icon"
    :label="action.name"
    :value="expanded"
  >
    <template v-for="(kid, key) in action.children">
      <DashboardAction
        :key="key"
        :action="kid"
        @active="expanded = true"
        @popup="$emit('popup', $event)"
      />
    </template>
  </q-expansion-item>
  <q-item
    v-else
    @click="openAction(action)"
    clickable
    v-ripple
    :active="isActive"
    :class="{ 'resource-not-implemented': !action.path, 'resource-separated': action.separated }"
  >
    <q-item-section avatar>
      <q-icon :name="action.icon" />
    </q-item-section>
    <q-item-section>
      {{ action.name }}
    </q-item-section>
    <q-item-section
      side
      style="padding: 0"
      class="open-in-popup"
    >
      <q-btn
        icon="open_in_new"
        flat
        dense
        round
        size="0.6rem"
        @click="openInPopup($event, action)"
      />
    </q-item-section>
  </q-item>
</template>

<script type="text/javascript">
export default {
  /**
   */
  name: 'DashboardAction',
  /**
   */
  props: {
    action: {
      type: Object,
      required: true
    }
  },
  /**
   */
  computed: {
    /**
     * @returns {boolean}
     */
    isActive () {
      const route = this.$route.path
      const path = this.action.path
      return route.includes(`${this.action.path}/`) || route === path
    }
  },
  /**
   */
  data: () => ({
    expanded: false
  }),
  /**
   */
  methods: {
    /**
     * @param {Object} action
     */
    openAction (action) {
      const path = action.path.split('?').shift()
      this.$router.push({ path })
    },
    /**
     * @param {Event} $event
     * @param {Object} action
     */
    openInPopup ($event, action) {
      $event.stopPropagation()
      $event.preventDefault()
      this.$emit('popup', action.path)
    }
  },
  /**
   */
  watch: {
    isActive: {
      immediate: true,
      handler (isActive) {
        if (!isActive) {
          return
        }
        this.$emit('active', true)
      }
    }
  }
}
</script>

<style scoped>

</style>

DashboardActions.vue

<template>
  <q-list
    bordered
    separator
  >
    <template v-for="action in actions">
      <DashboardAction
        :key="action.uuid"
        :action="action"
        @popup="openPopup"
      />
    </template>
  </q-list>
</template>

<script>
import DashboardAction from 'src/layouts/Dashboard/components/DashboardAction'

export default {
  /**
   */
  name: 'DashboardActions',
  /**
   */
  components: { DashboardAction },
  /**
   */
  props: {
    actions: {
      type: [Array, Object],
      default: () => []
    }
  },
  /**
   */
  methods: {
    /**
     * @param {string} path
     */
    openPopup (path) {
      // Fixes dual-screen position                         Most browsers      Firefox
      const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX
      const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY

      const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
      const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height

      const w = 1024
      const h = 600
      const systemZoom = width / window.screen.availWidth
      const left = (width - w) / 2 / systemZoom + dualScreenLeft
      const top = (height - h) / 2 / systemZoom + dualScreenTop
      const options = 'menubar=no,' +
        'location=no,' +
        'resizable=yes,' +
        'scrollbars=no,' +
        'status=no,' +
        'width=' + w / systemZoom + ',' +
        'height=' + h / systemZoom + ',' +
        'top=' + top + ',' +
        'left=' + left
      const url = `${window.location.origin}${window.location.pathname}#${path}?modal=true`
      const title = 'Popup'
      const newWindow = window.open(url, title, options)

      // Puts focus on the newWindow
      if (window.focus) {
        newWindow.focus()
      }
    }
  }
}
</script>

<style scoped>

</style>

tables.sql

CREATE TABLE `users` (
  `id` binary(16) NOT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `username` varchar(180) COLLATE utf8mb4_unicode_ci NOT NULL,
  `username_canonical` varchar(180) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email` varchar(180) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email_canonical` varchar(180) COLLATE utf8mb4_unicode_ci NOT NULL,
  `enabled` tinyint(1) NOT NULL,
  `salt` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `last_login` datetime DEFAULT NULL,
  `confirmation_token` varchar(180) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `password_requested_at` datetime DEFAULT NULL,
  `roles` longtext COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '(DC2Type:array)',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `profile_id` binary(16) DEFAULT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `uuid` char(36) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '(DC2Type:uuid)',
  `created_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `updated_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `deleted_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  `deleted_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `UNIQ_1483A5E992FC23A8` (`username_canonical`),
  UNIQUE KEY `UNIQ_1483A5E9A0D96FBF` (`email_canonical`),
  UNIQUE KEY `UNIQ_1483A5E9D17F50A6` (`uuid`),
  UNIQUE KEY `UNIQ_1483A5E9C05FB297` (`confirmation_token`),
  KEY `IDX_1483A5E9CCFA12B8` (`profile_id`),
  CONSTRAINT `FK_1483A5E9CCFA12B8` FOREIGN KEY (`profile_id`) REFERENCES `profiles` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

CREATE TABLE `profiles` (
  `id` binary(16) NOT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `reference` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `uuid` char(36) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '(DC2Type:uuid)',
  `created_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `updated_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `deleted_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  `deleted_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `UNIQ_8B308530D17F50A6` (`uuid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci


CREATE TABLE `actions` (
  `id` binary(16) NOT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `action_id` binary(16) DEFAULT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `namespace` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `icon` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `path` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `uuid` char(36) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '(DC2Type:uuid)',
  `created_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `updated_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `deleted_by` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  `deleted_at` datetime DEFAULT NULL,
  `separated` tinyint(1) DEFAULT '0',
  `assortment` int(11) DEFAULT '0',
  PRIMARY KEY (`id`),
  UNIQUE KEY `UNIQ_548F1EFD17F50A6` (`uuid`),
  UNIQUE KEY `UNIQ_548F1EF33E16B56` (`namespace`),
  KEY `IDX_548F1EF9D32F035` (`action_id`),
  CONSTRAINT `FK_548F1EF9D32F035` FOREIGN KEY (`action_id`) REFERENCES `actions` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci


CREATE TABLE `profiles_actions` (
  `profile_id` binary(16) NOT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  `action_id` binary(16) NOT NULL COMMENT '(DC2Type:uuid_binary_ordered_time)',
  PRIMARY KEY (`profile_id`,`action_id`),
  KEY `IDX_ECAF0094CCFA12B8` (`profile_id`),
  KEY `IDX_ECAF00949D32F035` (`action_id`),
  CONSTRAINT `FK_ECAF00949D32F035` FOREIGN KEY (`action_id`) REFERENCES `actions` (`id`),
  CONSTRAINT `FK_ECAF0094CCFA12B8` FOREIGN KEY (`profile_id`) REFERENCES `profiles` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci