From 95b2760840b6bf5ee1fd47f8a77d14f7ebcc6d50 Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Fri, 21 May 2021 12:43:18 -0400
Subject: [PATCH] Populate and style recent activity pane
---
app/Http/Controllers/UserController.php | 7 +++
app/Models/Order.php | 7 ++-
database/factories/OrderFactory.php | 7 ++-
database/factories/UserFactory.php | 1 +
...021_05_18_184617_create_services_table.php | 1 +
.../2021_05_19_185302_create_orders_table.php | 4 ++
database/seeders/DatabaseSeeder.php | 12 ++---
resources/js/main.js | 2 +-
resources/js/panel/panel.vue | 25 +++++++++-
resources/scss/_vars.scss | 2 +
resources/scss/main.scss | 48 +++++++++++++++++--
routes/web.php | 2 +-
12 files changed, 101 insertions(+), 17 deletions(-)
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index ad6b1b6..eccb8c3 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -4,6 +4,8 @@ namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
+use App\Models\Order;
+use App\Models\Service;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Hash;
use Illuminate\Auth\Events\Registered;
@@ -79,7 +81,12 @@ class UserController extends Controller
return redirect('/');
}
+ //It should have an orderBy clause to make sure the most recent are first
+ //This should limit non pending orders to 50. Should also return a json of all services
public function getOrders(Request $request) {
+ /* Log::debug(Auth::user()->orders()->service_name); */
+ return Auth::user()->orders()->with('service')->withCasts(['updated_at'
+ => 'datetime:d-m-Y'])->get();
}
diff --git a/app/Models/Order.php b/app/Models/Order.php
index 43da102..0dcc659 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -12,7 +12,7 @@ class Order extends Model
use HasFactory;
protected $fillable = [
- 'quantity'
+ 'quantity', 'url'
];
public function service() {
@@ -22,4 +22,9 @@ class Order extends Model
public function user() {
return $this->belongsTo(User::class);
}
+
+ public function getServiceNameAttribute() {
+ return $this->service()->name();
+ }
+
}
diff --git a/database/factories/OrderFactory.php b/database/factories/OrderFactory.php
index f49542b..16c7ff6 100644
--- a/database/factories/OrderFactory.php
+++ b/database/factories/OrderFactory.php
@@ -24,8 +24,13 @@ class OrderFactory extends Factory
*/
public function definition()
{
+ $quantity = $this->faker->numberBetween(100, 10000);
return [
- 'quantity' => $this->faker->randomNumber(4, false),
+ 'quantity' => $quantity,
+ 'status' => $this->faker->randomElement(['pending', 'completed',
+ 'canceled', 'processing']),
+ 'remaining' => $this->faker->numberBetween(0, $quantity),
+ 'url' => $this->faker->url,
'service_id' => function() {
return Service::inRandomOrder()->first()->id;
},
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index 3510ed6..6765140 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -25,6 +25,7 @@ class UserFactory extends Factory
return [
'name' => $this->faker->name,
'email' => $this->faker->unique()->safeEmail,
+ 'url' => $this->faker->unique()->safeEmail,
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
'remember_token' => Str::random(10),
diff --git a/database/migrations/2021_05_18_184617_create_services_table.php b/database/migrations/2021_05_18_184617_create_services_table.php
index 81d8a14..4a83fca 100644
--- a/database/migrations/2021_05_18_184617_create_services_table.php
+++ b/database/migrations/2021_05_18_184617_create_services_table.php
@@ -20,6 +20,7 @@ class CreateServicesTable extends Migration
$table->string('name');
$table->string('type')->nullable();
$table->string('site');
+ $table->string('description')->default('');
$table->boolean('available');
});
diff --git a/database/migrations/2021_05_19_185302_create_orders_table.php b/database/migrations/2021_05_19_185302_create_orders_table.php
index c79f88c..c20cb41 100644
--- a/database/migrations/2021_05_19_185302_create_orders_table.php
+++ b/database/migrations/2021_05_19_185302_create_orders_table.php
@@ -19,6 +19,10 @@ class CreateOrdersTable extends Migration
$table->foreignId('service_id')->constrained();
$table->foreignId('user_id')->constrained();
$table->bigInteger('quantity');
+ $table->string('note')->default('');
+ $table->bigInteger('remaining')->default(0);
+ $table->string('status');
+ $table->string('url');
});
}
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index a987efb..c8ea66b 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -18,37 +18,37 @@ class DatabaseSeeder extends Seeder
public function run()
{
Service::create([
- 'name' => 'youtube_views',
+ 'name' => 'Youtube Views',
'type' => 'views',
'site' => 'youtube',
'available' => true,
]);
Service::create([
- 'name' => 'instagram_views',
+ 'name' => 'Instagram Views',
'type' => 'views',
'site' => 'instagram',
'available' => true,
]);
Service::create([
- 'name' => 'spotify_plays',
+ 'name' => 'Spotify Views',
'type' => 'plays',
'site' => 'spotify',
'available' => true,
]);
Service::create([
- 'name' => 'twitter_likes',
+ 'name' => 'Twitter Likes',
'type' => 'likes',
'site' => 'spotify',
'available' => false,
]);
- $test_user = User::create([
+ User::create([
'name' => 'test_user_unverified',
'email' => 'unverified@example.com',
'role' => 'client',
'active' => true,
'password' => Hash::make("test123")
]);
- User::create([
+ $test_user = User::create([
'name' => 'test_user_verified',
'email' => 'verified@example.com',
'email_verified_at' => now(),
diff --git a/resources/js/main.js b/resources/js/main.js
index 829ad01..d67a15e 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -75,7 +75,6 @@ function getOrders(app) {
}).then(data => {
app.orders = data
})
- /* return this.user.name */
}
//Attempt to resend the verification link
@@ -142,5 +141,6 @@ if (window.location.pathname == '/') {
const app = createApp(Panel).mount('#panel')
window.onhashchange = ()=>{app.active = location.hash}
getUser(app)
+ getOrders(app)
}
diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index d39a6bb..c1ab6ab 100644
--- a/resources/js/panel/panel.vue
+++ b/resources/js/panel/panel.vue
@@ -7,12 +7,33 @@
<section class="alerts-pane"><h4>News and Announcements</h4>
<p>We've just launched. Thanks for joining us.</p>
</section>
- <section class="recent-pane"><h4>Recent Activity</h4>Recent activity showing last 5 completed orders </section>
+ <section class="recent-pane"><h4>Recent Activity</h4>
+ <table>
+ <thead><th>Date</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
+ <tbody>
+ <tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
+ <template v-if="order.status != 'pending'">
+ <td>{{order.updated_at}}</td>
+ <td>{{order.service.name}}</td>
+ <td :class="order.status"
+ class="status"><span>{{order.status.charAt(0).toUpperCase() +
+ order.status.slice(1)}}</span></td>
+ <td>{{order.quantity}}</td>
+ </template>
+ </tr>
+ </tbody>
+ </table>
+ </section>
</div>
<div v-else-if="active === '#orders'" id="main">
<div class="actions"><a href="#orders/new">New</a></div>
<section class="pending-pane">
<h4>Pending Orders</h4>
+ <ul>
+ <template v-bind:key='order.id' v-for="order in orders">
+ <li v-if="order.status == 'pending'">{{order.service.name}} - {{order.updated_at}}</li>
+ </template>
+ </ul>
</section>
</div>
</transition>
@@ -27,6 +48,6 @@ export default {
},
data() {
return {active: window.location.hash, user: '',
- token: ''}},
+ token: '', orders: ''}},
}
</script>
diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss
index 3860b84..b4a22e8 100644
--- a/resources/scss/_vars.scss
+++ b/resources/scss/_vars.scss
@@ -13,6 +13,8 @@ $theme-colors: (
"brand-orange": #f67602,
"grey": #e6ebf1,
"light-grey": #e9e9e9,
+ "light2-grey": rgb(190,190,190),
+ "light3-grey": rgb(245,245,245),
"dark-grey": #212121,
"faded-text": #425466,
"faded-text2": #6c757d,
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 692191d..aac9836 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -43,7 +43,7 @@ ul {
padding: 0;
}
-li {
+.services-cards li {
padding-bottom: 8px;
&:before {
width: 30px;
@@ -721,6 +721,7 @@ main.panel {
@include vars.hovering3;
transition: opacity 0.5s ease;
vertical-align: middle;
+ overflow: scroll;
// text-align: center;
section {
@@ -763,10 +764,47 @@ main.panel {
}
}
-// .fade-enter-active, .fade-leave-active {
- // transition: opacity 1s ease;
-// }
-
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
+
+.recent-pane {
+ table {
+ border-spacing: 4px;
+ margin: auto;
+ text-align: center;
+ }
+
+ th {
+ font-weight: normal;
+ color: vars.getColor("light2-grey");
+ }
+
+ tr {
+ border-bottom: 3px solid black;
+ }
+
+ td {
+ border-bottom: 2px solid vars.getColor("grey");
+ // color: vars.getColor("light3-grey");
+ // font-size: 1rem;
+ font-size: 0.8rem;
+ }
+
+ td.completed span {
+ background: vars.getColor('green');
+ color: vars.darkenColor('green');
+ border-radius: 4px;
+ padding: 2px;
+ }
+
+ td.processing {
+ color: vars.getColor('light-blue');
+ }
+
+ td.canceled {
+ color: vars.getColor('red-alert');
+ }
+
+
+}
diff --git a/routes/web.php b/routes/web.php
index 3ac40b6..8395ad6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -59,6 +59,6 @@ Route::get('/panel/user', function (Request $request) {
return $request->user();
})->middleware('auth');
-Route::post('/panel/orders', [UserController::class,
+Route::get('/panel/orders', [UserController::class,
'getOrders'])->middleware('auth');