Buttons | Dialog

Author: diazdesandi

03-issuesApp/.env

@@ -1,3 +1,5 @@
 GITHUB_TOKEN=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
-GITHUB_USER=facebook
-GITHUB_REPO=react
+# GITHUB_USER=facebook
+# GITHUB_REPO=react
+GITHUB_USER=diazdesandi
+GITHUB_REPO=VueTS

03-issuesApp/src/issues/components/FloatingButtons.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  buttons: Button[];
+}
+
+interface Button {
+  action: () => void;
+  color?: string;
+  icon: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+defineProps<Props>();
+</script>
+<template>
+  <div class="fab">
+    <q-btn
+      class="q-mr-sm"
+      v-for="button of buttons"
+      :key="button.icon"
+      round
+      :color="button.color || 'primary'"
+      :icon="button.icon"
+      :size="button.size || 'lg'"
+      @click="button.action"
+    />
+  </div>
+</template>
+<style scoped>
+.fab {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+}
+</style>

03-issuesApp/src/issues/components/NewIssueDialog.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isOpen = ref<boolean>(true);
+
+const title = ref<string>('');
+const body = ref<string>('');
+const labels = ref<string[]>([]);
+</script>
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-dialog v-model="isOpen" position="bottom">
+      <q-card style="width: 500px">
+        <q-form>
+          <q-linear-progress :value="1" color="primary" />
+
+          <q-card-section class="column no-wrap">
+            <div class="text-weight-bold">New Issue</div>
+            <div class="text-grey">Add new Issue</div>
+            <q-space />
+            <div>
+              <q-input
+                filled
+                v-model="title"
+                label="Ttitle"
+                placeholder="Title"
+                class="q-mb-sm"
+              />
+              <q-select
+                filled
+                v-model="labels"
+                multiple
+                :options="[]"
+                use-chips
+                stack-label
+                label="Multiple selection"
+                class="q-mb-sm"
+              />
+              <!--  TODO: Markdown Editor -->
+            </div>
+          </q-card-section>
+          <q-card-actions align="left">
+            <q-btn flat label="Cancel" v-close-popup color="dark" />
+            <q-space />
+            <q-btn type="submit" flat label="Add" v-close-popup color="dark" />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<style scoped></style>

03-issuesApp/src/issues/pages/ListPage.vue

@@ -3,8 +3,14 @@ import LoaderSpinner from 'src/shared/components/LoaderSpinner.vue';
 import FilterSelector from '../components/filter-selector/FilterSelector.vue';
 import IssueList from 'src/issues/components/issue-list/IssueList.vue';
 import useIssues from '../composables/useIssues';
+import FloatingButtons from '../components/FloatingButtons.vue';
+import NewIssueDialog from '../components/NewIssueDialog.vue';
 
 const { issuesQuery } = useIssues();
+
+const listPageClickTemp = () => {
+  console.log('ListPageClickTemp');
+};
 </script>
 <template>
   <div class="row q-mb-md">
@@ -15,7 +21,6 @@ const { issuesQuery } = useIssues();
 
   <div class="row">
     <div class="col-xs-12 col-md-4">
-      <!-- TODO: Filtros -->
       <FilterSelector />
     </div>
 
@@ -24,6 +29,23 @@ const { issuesQuery } = useIssues();
       <IssueList v-else :issues="issuesQuery.data?.value || []" />
     </div>
   </div>
+
+  <!-- FloatingButtons -->
+  <FloatingButtons
+    :buttons="[
+      {
+        action: listPageClickTemp,
+        color: 'primary',
+        icon: 'add',
+        size: 'lg',
+      },
+    ]"
+  />
+
+  <!-- New Issue -->
+
+  <NewIssueDialog />
+
 </template>
 
 <style scoped></style>